深刻理解JavaScript中的精度丟失

1.引子

衆所周知JavaScript僅有Number這個數值類型，而Number採用的時IEEE754規範中64位雙精度浮點數編碼。因而出現了經典的 0.1 + 0.2 === 0.30000000000000004 問題。

咱們抱着知其然還要知其因此然的態度來推導一下 0.1 + 0.2 的計算過程。

2.進制轉換

首先咱們須要瞭解如何將十進制小數轉爲二進制，方法以下：

對小數點之後的數乘以2，取結果的整數部分（不是1就是0），而後再用小數部分再乘以2，再取結果的整數部分……以此類推，直到小數部分爲0或者位數已經夠了就OK了。而後把取的整數部分按前後次序排列

按照上面的方法，咱們求取0.1的二進制數，結果發現0.1轉換後的二進制數爲：

0.000110011001100110011（0011無限循環）……

因此說，精度丟失並非語言的問題，而是浮點數存儲自己固有的缺陷。浮點數沒法精確表示其數值範圍內的全部數值，只能精確表示可用科學計數法 m*2^e 表示的數值而已，好比0.5的科學計數法是2^(-1)，則可被精確存儲；而0.一、0.2則沒法被精確存儲。

那麼對這種無限循環的二進制數應該怎樣存儲呢，總不能隨便取一個截斷長度吧。這個時候IEEE754規範的做用就體現出來了。

3.IEEE754規範

IEEE754對於浮點數表示方式給出了一種定義。格式以下：

(-1)^S * M * 2^E

各符號的意思以下：S，是符號位，決定正負，0時爲正數，1時爲負數。M，是指有效位數，大於1小於2。E，是指數位。

則0.1使用IEEE754規範表示就是：

(-1)^0 * 1.100110011(0011)…… * 2^-4

對於浮點數在計算機中的存儲，IEEE754規範提供了單精度浮點數編碼和雙精度浮點數編碼。

IEEE754規定，對於32位的單精度浮點數，最高的1位是符號位S，接着的8位是指數E，剩下的23位爲有效數字M。

對於64位的雙精度浮點數，最高的1位是符號位S，接着的11位是指數E，剩下的52位爲有效數字M。

	位數	階數	有效數字/尾數
單精度浮點數	32	8	23
雙精度浮點數	64	11	52

咱們以單精度浮點數爲例，分析0.15625實際的存儲方式。

0.15625轉換爲二進制數是0.00101，用科學計數法表示就是 1.01 * 2^(-3)，因此符號位爲0，表示該數爲正。注意，接下來的8位並不直接存儲指數-3，而是存儲階數，階數定義以下：

階數 = 指數+偏置量

對於單精度型數據其規定偏置量爲127，而對於雙精度來講，其規定的偏置量爲1023。因此0.15625的階數爲124，用8位二進制數表示爲01111100。

再注意，存儲有效數字時，將不會存儲小數點前面的1(由於二進制有效數字的第一位確定是1，省略)，因此這裏存儲的是01，不足23位，餘下的用0補齊。

固然，這裏還有一個問題須要說明，對於0.1這種有效數字無限循環的數該如何截斷，IEEE754默認的舍入模式是：

Round to nearest, ties to even

也就是說舍入到最接近且能夠表示的值，當存在兩個數同樣接近時，取偶數值。

4.回到 0.1 +0.2===0.30000000000000004 的問題

JavaScript是以64位雙精度浮點數存儲全部Number類型值，按照IEEE754規範，0.1的二進制數只保留52位有效數字，即 1.100110011001100110011001100110011001100110011001101 * 2^(-4)。 咱們以 - 來分割符號位、階數位和有效數字位，則0.1實際存儲時的位模式是0 - 01111111011 - 1001100110011001100110011001100110011001100110011010。

同理，0.2的二進制數爲1.100110011001100110011001100110011001100110011001101 * 2^(-3)， 所以0.2實際存儲時的位模式是0 - 01111111100 - 1001100110011001100110011001100110011001100110011010。

將0.1和0.2按實際展開，末尾補零相加，結果以下：

0.00011001100110011001100110011001100110011001100110011010
+0.00110011001100110011001100110011001100110011001100110100
------------------------------------------------------------
=0.01001100110011001100110011001100110011001100110011001110
複製代碼

只保留52位有效數字，則(0.1 + 0.2)的結果的二進制數爲 1.001100110011001100110011001100110011001100110011010 * 2^(-2), 省略尾數最後的0，即 1.00110011001100110011001100110011001100110011001101 * 2^(-2)， 所以(0.1+0.2)實際存儲時的位模式是 0 - 01111111101 - 0011001100110011001100110011001100110011001100110100。

(0.1 + 0.2)的結果的十進制數爲0.30000000000000004，至此推導完成。

咱們能夠在chrome上驗證咱們的推導過程是否和瀏覽器一致。

菜鳥工具也提供了豐富的進制轉換功能可讓咱們驗證結果的準確性。

(0.1).toString('2')
// "0.0001100110011001100110011001100110011001100110011001101"
(0.2).toString('2')
// "0.001100110011001100110011001100110011001100110011001101"
(0.1+0.2).toString('2')
// "0.0100110011001100110011001100110011001100110011001101"
(0.3).toString('2')
// "0.010011001100110011001100110011001100110011001100110011"
複製代碼

5.解決精度丟失的問題

5.1類庫

NPM上有許多支持JavaScript和Node.js的數學庫，好比math.js，decimal.js,D.js等等

5.2 原生方法

toFixed()方法可把Number四捨五入爲指定小數位數的數字。但並表明該方法是可靠的。chrome上測試以下：

1.35.toFixed(1) // 1.4 正確
1.335.toFixed(2) // 1.33 錯誤
1.3335.toFixed(3) // 1.333 錯誤
1.33335.toFixed(4) // 1.3334 正確
1.333335.toFixed(5)  // 1.33333 錯誤
1.3333335.toFixed(6) // 1.333333 錯誤
複製代碼

咱們能夠把toFix重寫一下來解決。經過判斷最後一位是否大於等於5來決定需不須要進位，若是須要進位先把小數乘以倍數變爲整數，加1以後，再除以倍數變爲小數，這樣就不用一位一位的進行判斷。參考文章。

5.3 ES6

ES6在Number對象上新增了一個極小的常量——Number.EPSILON

Number.EPSILON
// 2.220446049250313e-16
Number.EPSILON.toFixed(20)
// "0.00000000000000022204"
複製代碼

引入一個這麼小的量，目的在於爲浮點數計算設置一個偏差範圍，若是偏差可以小於Number.EPSILON，咱們就能夠認爲結果是可靠的。

偏差檢查函數（出自《ES6標準入門》-阮一峯）

function withinErrorMargin (left, right) {
    return Math.abs(left - right) < Number.EPSILON
}
withinErrorMargin(0.1+0.2, 0.3)
複製代碼