一、場景復現 一個經典的面試題 0.1 + 0.2 0.3 // false 為什麼是false呢? 先看下麵這個比喻 比如一個數 1÷3=0.33333333...... 3會一直無限迴圈，數學可以表示，但是電腦要存儲，方便下次取出來再使用，但0.333333...... 這個數無限迴圈，再大的 ...
一、場景復現
一個經典的面試題
0.1 + 0.2 === 0.3 // false
為什麼是false呢?
先看下麵這個比喻
比如一個數 1÷3=0.33333333......
3會一直無限迴圈，數學可以表示，但是電腦要存儲，方便下次取出來再使用，但0.333333...... 這個數無限迴圈，再大的記憶體它也存不下，所以不能存儲一個相對於數學來說的值，只能存儲一個近似值，當電腦存儲後再取出時就會出現精度丟失問題
二、浮點數
“浮點數”是一種表示數字的標準，整數也可以用浮點數的格式來存儲
我們也可以理解成，浮點數就是小數
在JavaScript中，現在主流的數值類型是Number，而Number採用的是IEEE754規範中64位雙精度浮點數編碼
這樣的存儲結構優點是可以歸一化處理整數和小數，節省存儲空間
對於一個整數，可以很輕易轉化成十進位或者二進位。但是對於一個浮點數來說，因為小數點的存在，小數點的位置不是固定的。解決思路就是使用科學計數法，這樣小數點位置就固定了
而電腦只能用二進位（0或1）表示，二進位轉換為科學記數法的公式如下：
其中，a的值為0或者1，e為小數點移動的位置
舉個例子：
27.0轉化成二進位為11011.0 ，科學計數法表示為：
前面講到，javaScript存儲方式是雙精度浮點數，其長度為8個位元組，即64位比特
64位比特又可分為三個部分：
- 符號位S：第 1 位是正負數符號位（sign），0代表正數，1代表負數
- 指數位E：中間的 11 位存儲指數（exponent），用來表示次方數，可以為正負數。在雙精度浮點數中，指數的固定偏移量為1023
- 尾數位M：最後的 52 位是尾數（mantissa），超出的部分自動進一舍零
如下圖所示：
舉個例子：
27.5 轉換為二進位11011.1
11011.1轉換為科學記數法
符號位為1(正數)，指數位為4+，1023+4，即1027
因為它是十進位的需要轉換為二進位，即 10000000011，小數部分為10111，補夠52位即： 1011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000`
所以27.5存儲為電腦的二進位標準形式（符號位+指數位+小數部分 (階數)），既下麵所示
0+10000000011+011 1000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000`
二、問題分析
再回到問題上
0.1 + 0.2 === 0.3 // false
通過上面的學習，我們知道，在javascript語言中，0.1 和 0.2 都轉化成二進位後再進行運算
// 0.1 和 0.2 都轉化成二進位後再進行運算 0.00011001100110011001100110011001100110011001100110011010 + 0.0011001100110011001100110011001100110011001100110011010 = 0.0100110011001100110011001100110011001100110011001100111 // 轉成十進位正好是 0.30000000000000004
所以輸出false
再來一個問題，那麼為什麼x=0.1得到0.1？
主要是存儲二進位時小數點的偏移量最大為52位，最多可以表達的位數是2^53=9007199254740992，對應科學計數尾數是 9.007199254740992，這也是 JS 最多能表示的精度
它的長度是 16，所以可以使用 toPrecision(16) 來做精度運算，超過的精度會自動做湊整處理
.10000000000000000555.toPrecision(16) // 返回 0.1000000000000000，去掉末尾的零後正好為 0.1
但看到的 0.1 實際上並不是 0.1。不信你可用更高的精度試試：
0.1.toPrecision(21) = 0.100000000000000005551
如果整數大於 9007199254740992 會出現什麼情況呢？
由於指數位最大值是1023，所以最大可以表示的整數是 2^1024 - 1，這就是能表示的最大整數。但你並不能這樣計算這個數字，因為從 2^1024 開始就變成了 Infinity
> Math.pow(2, 1023) 8.98846567431158e+307 > Math.pow(2, 1024) Infinity
那麼對於 (2^53, 2^63) 之間的數會出現什麼情況呢？
(2^53, 2^54)之間的數會兩個選一個，只能精確表示偶數(2^54, 2^55)之間的數會四個選一個，只能精確表示4個倍數- ... 依次跳過更多2的倍數
要想解決大數的問題你可以引用第三方庫 bignumber.js，原理是把所有數字當作字元串，重新實現了計算邏輯，缺點是性能比原生差很多
小結
電腦存儲雙精度浮點數需要先把十進位數轉換為二進位的科學記數法的形式，然後電腦以自己的規則{符號位+(指數位+指數偏移量的二進位)+小數部分}存儲二進位的科學記數法
因為存儲時有位數限制（64位），並且某些十進位的浮點數在轉換為二進位數時會出現無限迴圈，會造成二進位的舍入操作(0舍1入)，當再轉換為十進位時就造成了計算誤差
三、解決方案
理論上用有限的空間來存儲無限的小數是不可能保證精確的，但我們可以處理一下得到我們期望的結果
當你拿到 1.4000000000000001 這樣的數據要展示時，建議使用 toPrecision 湊整並 parseFloat 轉成數字後再顯示，如下：
parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True
封裝成方法就是：
function strip(num, precision = 12) {
return +parseFloat(num.toPrecision(precision));
}
對於運算類操作，如 +-*/，就不能使用 toPrecision 了。正確的做法是把小數轉成整數後再運算。以加法為例：
/**
* 精確加法
*/
function add(num1, num2) {
const num1Digits = (num1.toString().split('.')[1] || '').length;
const num2Digits = (num2.toString().split('.')[1] || '').length;
const baseNum = Math.pow(10, Math.max(num1Digits, num2Digits));
return (num1 * baseNum + num2 * baseNum) / baseNum;
}
最後還可以使用第三方庫，如Math.js、BigDecimal.js
參考文獻
- https://zhuanlan.zhihu.com/p/100353781
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
