機器眼睛裏的小數

前言

這篇文章我想寫下關於最近我學習的小數部分的內容。
本文首次發表於https://segmentfault.com/a/11...

A:what？ 小數，什麼鬼？
B:我研究過大數相加，你說的是那個大數對應的小數嗎？

你沒聽錯，就是小數，不過是像 0.1，0.75，1.5這樣的小數，不是很小的整數喲( ⊙ o ⊙ )！

關於小數的問題

關於小數你瞭解多少呢？先來一個小數的運算語句。

Number(0.1).toString(2)
// 若是你把這個語句JavaScript引擎裏執行下，你會獲得下面這個字符串
// "0.0001100110011001100110011001100110011001100110011001101"

若是這個難不到你，那三步走，拿起你的小黑鼠，移到頁面上部的X，按下左鍵，而後88。由於本文不適合你了😒（有脾氣了）
若是不幸，你被難倒了，那我😏(斜眼笑)。

解釋奇怪的字符串

要解釋這個字符串的來歷，可得費點功夫了，施主，你準備好瓜子，板凳了嗎？
（長篇警告）
鑑於大家都不耐其煩的看到這了，那我就耐心的來扒一扒，爲何是這麼個字符串。。。
咱們分爲下面幾步來解釋下這個字符串的來歷：

1. 上面問題中JavaScript語句的功能
2. 信息在計算機中是如何存儲的
3. 小數在計算機中是如何存儲的
4. 小數在JavaScript中是如何表示的
5. 這條語句結果的分析

那麼咱們就逐步來：

語句功能

咱們的語句是 Number(0.1).toString(2)
咱們拆分下這個複合語句

let wrapNumber = Number(0.1);                 (1)
let binaryNumber = wrapNumber.toString(2);    (2)

語句(1)將一個基本類型的數值0.1,使用數值類型的構造器將其包裝成wrapNumber
補充內容:關於wrapNumber的類型
由於原始數值類型的數值存在一些有用的方法，好比 toFixed方法，
和咱們第二行語句中的toString()方法等。
[toString([radix])][3]方法的將數值轉換成一個radix進制數值對象的字符串
因此到這一步，咱們應該知道，"0.0001100110011001100110011001100110011001100110011001101" 表明的是十進制數0.1的2進製表示形式
若是你看了這篇就懂了，那就不用繼續看下去了
要了解這個字符串咱們必須得了解一下，數據在計算機裏是怎麼表示的，又是怎麼樣運算的？

數據的表示

計算機中的信息表示

計算機內部的實現：在現代計算機內部，全部的信息（圖，聲，字符串，數值等）都是經過二進制數值的形式來表示的；
推斷：只要理解了二進制數表示信息的方法及其運算原理，對於理解小數在計算機中的存儲那就更進一步了。

計算機中使用二進制表示數據

那麼現實中的計算機爲何內部使用二進制來表示信息呢，咱們人不是更習慣十進制嘛，爲何不讓機器也弄十進制呀。
這就得從計算機的組成提及，計算機都是由數字集成電路電子部件組成的。而這些電子部件都會有和其餘部件鏈接的引腳，而全部的引腳上只有直流電壓0V和5V倆個狀態。二進制數恰好只有倆個狀態，與電子部件的能表示倆個狀態的特性恰好吻合，決定了計算機中的信息用二進制數來表示最爲簡單和高效。因此計算機處理信息的最小單位--位，就至關於二進制中的一位。位的英文bit是二進制數位（binary digit）的縮寫。
而計算機中處理信息的基本計量單位是字節(Byte). 8位爲1個字節. 位是最小單位,字節是基本單位。
因此咱們表示
十進制的1， 二進制:00000001 一個字節來表示
十進制的6， 二進制:00100111 00000110(Golden糾正) 一個字節來表示 0～2^8-1的數共2^8個數
十進制的512，二進制: 000000001 000000000 倆個字節來表示 0～2^16-1共2^16個數
二進制數轉十進制數的方法，簡單歸納爲：按權相加。

對於XX進制數之間的轉換我在這裏就不贅述了，不是本篇文章討論的核心問題：
因此程序中使用的十進制數，在計算機中會被編譯爲二進制數進行運算。
更多詳細的內容：請參考《程序是怎麼跑起來的》:中第二章-數據是用二進制數表示的

小數的表示法

小數和浮點數的區別相關文章能夠參考迷渡大佬的文章
代碼之謎（四）- 浮點數（從驚訝到思考)

那麼咱們再想一想，十進制整數都是能夠成功使用更多位的二進制數來表示，那小數呢？
好比從0~1就有無限多個小數，而計算機中用什麼樣的方式來表示這無限多個小數呢？
答案是不能所有表示； 驚訝後又點了點頭.jpg

根據如今編程語言普遍採用的國際標準IEEE 754中制定的浮點數的表示方式
下面三張圖來自《程序是怎麼跑起來的》

雙精度和單精度對應的指數和尾數的長度入下圖：

依據浮點數表示法，咱們能夠將0.75表示成

爲了表示數的惟一性，標準對錶示的形式也作了細緻的規定：只能使用圖3-5 中第一行的這種形式

若是看完上圖還未理解本小節內容，請參考下面推薦的文章；
浮點數的二進制表示
注：看這篇文章能夠更細緻的理解這節的內容
《程序是怎麼跑起來的第三章》：計算機進行小數計算時出錯的緣由
注：看這篇能夠理解到更多計算機的機制相關內容
個人英文不夠好，其餘同窗若是英文好：請直接閱讀IEEE 754，WIKI中的內容
IEEE 754 雙精度 64 位浮點數

JavaScript中的小數

咱們繼續探索一下JavaScript中小數的表示：Annotated ECMAScript 5.1
ES6中Number類型的描述：

primitive value corresponding to a double-precision 64-bit binary format IEEE 754-2008 value
Number類型的原始值對應於雙精度64位二進制格式IEEE 754-2008的值;
因此說ECMA中的數都是採用IEEE754標準，小數的表示和咱們看的上面的浮點數的表示是一致的。
注意： 整數也是這麼表示的哦，只不過指數部分爲正數而已。
詳解 JavaScript 數據類型
分析到這裏，應該知道這個字符串是怎麼來的了吧.

這個字符串的生成

能夠利用下面這個小公式生成十進制小數對應的二進制字符串：
一個js的小工具：
科學計數法表示的十進制浮點數轉二進制字符串
若是你想寫一個能夠參考這篇文章中的步驟或者：
ToString Applied to the Number Type
基礎野：細說浮點數
這篇文章主要是想去讓本身瞭解浮點數的內容；
不過看了許多文章，都會提到規避這種計算機沒法精確表示浮點數的實用方法，方便之後查閱。
方法1、小數轉成整數後計算；
方法2、利用bignumber

補充部分：關於wrapNumber的類型

有人可能就有疑問了，這個wrapNumber是什麼類型，是Number類型的實例對象嗎？
咱們用下面語句測試下

typeof wrapNumber === 'number'
Object.prototype.toString.call(wrapNumber) === "[object Number]"
Object.prototype.toString.call(0.1) === "[object Number]" //補充部分

結果一致，都可檢測出wrapNumber爲原始數值類型
可是它卻不是Number類型的實例對象，僅僅是一個Number類型的值, 從下面語句能夠看出。

wrapNumber instanceof Number === false
wrapNumber instanceof Object === false
wrapNumber === 0.1 // 值
let wrapNumberObj = new Number(0.1);
typeof wrapNumberObj === 'object'
wrapNumberObj instanceof Number === true
wrapNumberObj instanceof Object === true
Object.prototype.toString.call(wrapNumberObj) === "[object Number]"
wrapNumberObj.valueOf() === 0.1 //new 對象的取值方式

MDN中Number類型中關於無new構造的描述以下：

In a non-constructor context (i.e., without the new operator), Number can be used to perform a type conversion.

因此你們在作類型檢查的時候仍是要區分下new構造和無new構造的區別；

類似文章：
JS魔法堂：完全理解0.1 + 0.2 === 0.30000000000000004的背後
該死的IEEE-754浮點數，說「約」就「約」，你的底線呢？以JS的名義來好好查查你
浮點數那些事兒
http://justjavac.com/codepuzz...
http://justjavac.com/codepuzz...
參考文章：
IEEE 754-2008
sec-terms-and-definitions-number-value
JavaScript 中小數和大整數的精度丟失