姚麗冰? ? ? 學(xué)號(hào)：16050120089
鏈接：https://juejin.im/entry/59f9ed38f265da430b7a9090
【嵌牛導(dǎo)讀】：眾所周知，JavaScript 浮點(diǎn)數(shù)運(yùn)算時(shí)經(jīng)常遇到會(huì) 0.000000001 和 0.999999999 這樣奇怪的結(jié)果梗搅，如 0.1+0.2=0.30000000000000004尸疆、1-0.9=0.09999999999999998蟀拷，很多人知道這是浮點(diǎn)數(shù)誤差問題制市，但具體原因就說不清楚了志衍。
【嵌牛鼻子】：浮點(diǎn)數(shù)暖庄，javascript,大數(shù)危機(jī)，四則運(yùn)算
【嵌牛提問】：這背后的原理以及解決方案是什么楼肪，JS中的大數(shù)危機(jī)是什么培廓，四則運(yùn)算中會(huì)遇到哪些坑。
【嵌牛正文】：
浮點(diǎn)數(shù)的存儲(chǔ)
首先要搞清楚 JavaScript 如何存儲(chǔ)小數(shù)春叫。和其它語言如 Java 和 Python 不同肩钠，JavaScript 中所有數(shù)字包括整數(shù)和小數(shù)都只有一種類型 — Number。它的實(shí)現(xiàn)遵循 IEEE 754 標(biāo)準(zhǔn)暂殖，使用 64 位固定長度來表示价匠，也就是標(biāo)準(zhǔn)的 double 雙精度浮點(diǎn)數(shù)（相關(guān)的還有float 32位單精度）。計(jì)算機(jī)組成原理中有過詳細(xì)介紹呛每，如果你不記得也沒關(guān)系踩窖。
注：大多數(shù)語言中的小數(shù)默認(rèn)都是遵循 IEEE 754 的 float 浮點(diǎn)數(shù)，包括 Java晨横、Ruby洋腮、Python，本文中的浮點(diǎn)數(shù)問題同樣存在手形。
這樣的存儲(chǔ)結(jié)構(gòu)優(yōu)點(diǎn)是可以歸一化處理整數(shù)和小數(shù)啥供，節(jié)省存儲(chǔ)空間。
64位比特又可分為三個(gè)部分：
符號(hào)位S：第 1 位是正負(fù)數(shù)符號(hào)位（sign）库糠，0代表正數(shù)伙狐，1代表負(fù)數(shù)
指數(shù)位E：中間的 11 位存儲(chǔ)指數(shù)（exponent），用來表示次方數(shù)
尾數(shù)位M：最后的 52 位是尾數(shù)（mantissa），超出的部分自動(dòng)進(jìn)一舍零
64 bit allocation
實(shí)際數(shù)字就可以用以下公式來計(jì)算：
數(shù)字計(jì)算公式
注意以上的公式遵循科學(xué)計(jì)數(shù)法的規(guī)范鳞骤，在十進(jìn)制中 0<M<10窒百，到二進(jìn)制就是 0<M<2。也就是說整數(shù)部分只能是1豫尽，所以可以被舍去篙梢，只保留后面的小數(shù)部分。如 4.5 轉(zhuǎn)成二進(jìn)制就是 100.1美旧，科學(xué)計(jì)數(shù)法表示是 1.001*2^2渤滞，舍去1后 M = 001。E是一個(gè)無符號(hào)整數(shù)榴嗅，因?yàn)殚L度是11位妄呕，取值范圍是 0~2047。但是科學(xué)計(jì)數(shù)法中的指數(shù)是可以為負(fù)數(shù)的嗽测，所以約定減去一個(gè)中間數(shù) 1023绪励，[0,1022] 表示為負(fù)，[1024,2047] 表示為正唠粥。如 4.5 的指數(shù) E = 1025疏魏，尾數(shù) M = 001。
最終的公式變成：
所以 4.5 最終表示為（M=001晤愧、E=1025）：
4.5 allocation map
(圖片由此生成 http://www.binaryconvert.com/convert_double.html)
下面再以 0.1 為例解釋浮點(diǎn)誤差的原因大莫，0.1 轉(zhuǎn)成二進(jìn)制表示為 0.0001100110011001100(1100循環(huán))，1.100110011001100x2^-4官份，所以 E=-4+1023=1019只厘；M 舍去首位的1，得到 100110011...舅巷。最終就是：
0.1 allocation map
轉(zhuǎn)化成十進(jìn)制后為 0.100000000000000005551115123126羔味，因此就出現(xiàn)了浮點(diǎn)誤差。
為什么 0.1+0.2=0.30000000000000004钠右？
計(jì)算步驟為：
// 0.1 和 0.2 都轉(zhuǎn)化成二進(jìn)制后再進(jìn)行運(yùn)算
0.00011001100110011001100110011001100110011001100110011010 +
0.0011001100110011001100110011001100110011001100110011010 =
0.0100110011001100110011001100110011001100110011001100111
// 轉(zhuǎn)成十進(jìn)制正好是 0.30000000000000004
為什么 x=0.1 能得到 0.1赋元？
恭喜你到了看山不是山的境界。因?yàn)?mantissa 固定長度是 52 位爬舰，再加上省略的一位，最多可以表示的數(shù)是 2^53=9007199254740992寒瓦，對應(yīng)科學(xué)計(jì)數(shù)尾數(shù)是 9.007199254740992情屹，這也是 JS 最多能表示的精度。它的長度是 16杂腰，所以可以近似使用 toPrecision(16) 來做精度運(yùn)算垃你，超過的精度會(huì)自動(dòng)做湊整處理。于是就有：
0.10000000000000000555.toPrecision(16)
// 返回 0.1000000000000000，去掉末尾的零后正好為 0.1
// 但你看到的 `0.1` 實(shí)際上并不是 `0.1`惜颇。不信你可用更高的精度試試：
0.1.toPrecision(21) = 0.100000000000000005551
大數(shù)危機(jī)
可能你已經(jīng)隱約感覺到了皆刺，如果整數(shù)大于 9007199254740992 會(huì)出現(xiàn)什么情況呢？
由于 E 最大值是 1023凌摄，所以最大可以表示的整數(shù)是 2^1024 - 1羡蛾，這就是能表示的最大整數(shù)。但你并不能這樣計(jì)算這個(gè)數(shù)字锨亏，因?yàn)閺?2^1024 開始就變成了 Infinity
> Math.pow(2, 1023)
8.98846567431158e+307
> Math.pow(2, 1024)
Infinity
那么對于 (2^53, 2^63) 之間的數(shù)會(huì)出現(xiàn)什么情況呢痴怨？
(2^53, 2^54) 之間的數(shù)會(huì)兩個(gè)選一個(gè)，只能精確表示偶數(shù)
(2^54, 2^55) 之間的數(shù)會(huì)四個(gè)選一個(gè)器予，只能精確表示4個(gè)倍數(shù)
... 依次跳過更多2的倍數(shù)
下面這張圖能很好的表示 JavaScript 中浮點(diǎn)數(shù)和實(shí)數(shù)（Real Number）之間的對應(yīng)關(guān)系浪藻。我們常用的 (-2^53, 2^53) 只是最中間非常小的一部分，越往兩邊越稀疏越不精確乾翔。
fig1.jpg
在淘寶早期的訂單系統(tǒng)中把訂單號(hào)當(dāng)作數(shù)字處理爱葵，后來隨意訂單號(hào)暴增，已經(jīng)超過了
9007199254740992反浓，最終的解法是把訂單號(hào)改成字符串處理萌丈。
要想解決大數(shù)的問題你可以引用第三方庫 bignumber.js，原理是把所有數(shù)字當(dāng)作字符串勾习，重新實(shí)現(xiàn)了計(jì)算邏輯浓瞪，缺點(diǎn)是性能比原生的差很多，所以原生支持大數(shù)就很有必要了巧婶。TC39 已經(jīng)有一個(gè) Stage 3 的提案 proposal bigint乾颁，大數(shù)問題有望徹底解決。在瀏覽器正式支持前艺栈，可以使用 Babel 7.0 來實(shí)現(xiàn)英岭，它的內(nèi)部是自動(dòng)轉(zhuǎn)換成 big-integer 來計(jì)算，這樣能保持精度但運(yùn)算效率會(huì)降低湿右。
toPrecision vs toFixed
數(shù)據(jù)處理時(shí)诅妹，這兩個(gè)函數(shù)很容易混淆。它們的共同點(diǎn)是把數(shù)字轉(zhuǎn)成字符串供展示使用毅人。注意在計(jì)算的中間過程不要使用吭狡，只用于最終結(jié)果。
不同點(diǎn)就需要注意一下：
toPrecision 是處理精度丈莺，精度是從左至右第一個(gè)不為0的數(shù)開始數(shù)起划煮。
toFixed 是小數(shù)點(diǎn)后指定位數(shù)取整，從小數(shù)點(diǎn)開始數(shù)起缔俄。
兩者都能對多余數(shù)字做湊整處理弛秋，也有些人用 toFixed 來做四舍五入器躏，但一定要知道它是有 Bug 的。
如：1.005.toFixed(2) 返回的是 1.00 而不是 1.01蟹略。
原因： 1.005 實(shí)際對應(yīng)的數(shù)字是 1.00499999999999989登失，在四舍五入時(shí)全部被舍去！
解法：使用四舍五入函數(shù) Math.round() 來處理挖炬。但 Math.round(1.005 * 100) / 100 還是不行揽浙，因?yàn)?1.005 * 100 = 100.49999999999999。還需要把乘法和除法精度誤差都解決后再使用 Math.round茅茂∧笃迹可以使用后面介紹的 number-precision#round 方法來解決。
解決方案
回到最關(guān)心的問題：如何解決浮點(diǎn)誤差空闲。首先令杈，理論上用有限的空間來存儲(chǔ)無限的小數(shù)是不可能保證精確的，但我們可以處理一下得到我們期望的結(jié)果碴倾。
數(shù)據(jù)展示類
當(dāng)你拿到 1.4000000000000001 這樣的數(shù)據(jù)要展示時(shí)逗噩，建議使用 toPrecision 湊整并 parseFloat 轉(zhuǎn)成數(shù)字后再顯示，如下：
parseFloat(1.4000000000000001.toPrecision(12)) === 1.4? // True
封裝成方法就是：
function strip(num, precision = 12) {
? return +parseFloat(num.toPrecision(precision));
}
為什么選擇 12 做為默認(rèn)精度跌榔？這是一個(gè)經(jīng)驗(yàn)的選擇异雁，一般選12就能解決掉大部分0001和0009問題，而且大部分情況下也夠用了僧须，如果你需要更精確可以調(diào)高纲刀。
數(shù)據(jù)運(yùn)算類
對于運(yùn)算類操作，如 +-*/担平，就不能使用 toPrecision 了示绊。正確的做法是把小數(shù)轉(zhuǎn)成整數(shù)后再運(yùn)算。以加法為例：
/**
* 精確加法
*/
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;
}
以上方法能適用于大部分場景暂论。遇到科學(xué)計(jì)數(shù)法如 2.3e+1（當(dāng)數(shù)字精度大于21時(shí)面褐，數(shù)字會(huì)強(qiáng)制轉(zhuǎn)為科學(xué)計(jì)數(shù)法形式顯示）時(shí)還需要特別處理一下。
能讀到這里取胎，說明你非常有耐心展哭，那我就放個(gè)福利吧。遇到浮點(diǎn)數(shù)誤差問題時(shí)可以直接使用
https://github.com/dt-fe/number-precision
完美支持浮點(diǎn)數(shù)的加減乘除闻蛀、四舍五入等運(yùn)算匪傍。非常小只有1K，遠(yuǎn)小于絕大多數(shù)同類庫（如Math.js觉痛、BigDecimal.js）役衡，100%測試全覆蓋，代碼可讀性強(qiáng)秧饮，不妨在你的應(yīng)用里用起來映挂！
參考
Double-precision floating-point format
What Every Programmer Should Know About Floating-Point Arithmetic
Why Computers are Bad at Algebra | Infinite Series
Is Your Model Susceptible to Floating-Point Errors?
如果你覺得本文對你有幫助，請猛擊喜歡鼓勵(lì)一下
