Javascript 數字精度丟失的問題，如何解決？

作者：小焱2018 2022-07-14 14:27:34

我們都知道計算機是通過二進制來存儲東西的，0.1和0.2在轉換二進制后都是是無限循環的，這樣其實沒什么問題，但是 JS 采用的浮點數標準卻會裁剪掉后面的數字，導致精度丟失 0.1+0.2=0.30000000000000004。

?我們在處理數據的時候可能會遇到類似0.1+0.2 !=0.3的問題，讓我們來分析下原因：

因為 JS 采用 IEEE 754 雙精度版本（64位），并且只要采用 IEEE 754 的語言都有該問題（我知道的java也是這樣）。我們都知道計算機是通過二進制來存儲東西的，0.1和0.2在轉換二進制后都是是無限循環的，這樣其實沒什么問題，但是 JS 采用的浮點數標準卻會裁剪掉后面的數字，導致精度丟失 0.1+0.2=0.30000000000000004。

場景復現

一個經典的面試題：

0.1 + 0.2 === 0.3 // false

為什么是false呢?

先看下面這個比喻：

比如一個數 1÷3=0.33333333......

3會一直無限循環，數學可以表示，但是計算機要存儲，方便下次取出來再使用，但0.333333...... 這個數無限循環，再大的內存它也存不下，所以不能存儲一個相對于數學來說的值，只能存儲一個近似值，當計算機存儲后再取出時就會出現精度丟失問題。

比如18466.67*100，按理說他等于1846667吧，可是他等于1846666.9999999998，效果如下：

Javascript 數字精度丟失的問題，如何解決？

浮點數

“浮點數”是一種表示數字的標準，整數也可以用浮點數的格式來存儲。

我們也可以理解成，浮點數就是小數。

在JavaScript中，現在主流的數值類型是Number，而Number采用的是IEEE754規范中64位雙精度浮點數編碼。

這樣的存儲結構優點是可以歸一化處理整數和小數，節省存儲空間。

對于一個整數，可以很輕易轉化成十進制或者二進制。但是對于一個浮點數來說，因為小數點的存在，小數點的位置不是固定的。解決思路就是使用科學計數法，這樣小數點位置就固定了。

而計算機只能用二進制（0或1）表示，二進制轉換為科學記數法的公式如下：

Javascript 數字精度丟失的問題，如何解決？

其中，a的值為0或者1，e為小數點移動的位置。

舉個例子：

27.0轉化成二進制為11011.0 ，科學計數法表示為：

Javascript 數字精度丟失的問題，如何解決？

前面講到，javaScript存儲方式是雙精度浮點數，其長度為8個字節，即64位比特。

64位比特又可分為三個部分：

符號位S：第 1 位是正負數符號位（sign），0代表正數，1代表負數。
指數位E：中間的 11 位存儲指數（exponent），用來表示次方數，可以為正負數。在雙精度浮點數中，指數的固定偏移量為1023。
尾數位M：最后的 52 位是尾數（mantissa），超出的部分自動進一舍零。

如下圖所示：

Javascript 數字精度丟失的問題，如何解決？

舉個例子：

27.5 轉換為二進制11011.1

11011.1轉換為科學記數法

Javascript 數字精度丟失的問題，如何解決？

符號位為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`

二進制

基數為2
有2個數字，即0和1
滿2進1

八進制

基數為8
由8個數字組成，分別是0、1、2、3、4、5、6、7
滿8進1

十進制

我們日常生活中所用的都是十進制，也就是滿10進1

十六進制

基數為16。
由16個數字符號組成，分別是0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F
滿16進1

在古代中國當時使用的重量單位就是十六進制，16兩為1斤，就有了所謂的“半斤八兩”

舉個例子：

比如十進制：

1 2 3 4 5 6 7 8 9 10 11 ...

當要數10時，就要進1位，也就是十位數寫1，個位數寫0，即滿十進一。

二進制：

0 1 10 11 10 11 110 111 101 ...

當要數2的時候，就要進1位了，上一位寫1，當前位變成0 即滿二進一。

進制之間怎么轉換？

不會的話自行百度吧。

問題分析

再回到問題上：

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，原理是把所有數字當作字符串，重新實現了計算邏輯，缺點是性能比原生差很多。

浮點型的存儲機制(單精度浮點數，雙精度浮點數)。

浮點型數據類型主要有：單精度float、雙精度double

單精度浮點數（float）

單精度浮點數在內存中占4個字節、有效數字8位、表示范圍：-3.40E+38 ~ +3.40E+38

雙精度浮點數（double）

雙精度浮點數在內存中占8個字節、有效數字16位、表示范圍：-1.79E+308 ~ +1.79E+308

浮點型常量數有兩種表示形式：

1. 十進制數形式：由數字和小數點組成,且必須有小數點,如0.123,123.0。
科學計數法形式：如:123e3或123E3,其中e或E之前必須有數字,且e或E后面的指數必須為整數（當然也包括負整數）。

浮點型簡單來說就是表示帶有小數的數據，而恰恰小數點可以在相應的二進制的不同位置浮動，可能是這樣就被定義成浮點型了。~不得不佩服這文化程度，定義個數據名稱都這么有深度~

但是！！！

JavaScript 存儲小數和其它語言如 Java 和 Python 都不同，JavaScript 中所有數字包括整數和小數都只有一種類型即 Number類型它的實現遵循 IEEE 754 標準，IEEE 754 標準的內容都有什么，這個咱不用管，我們只需要記住以下一點：

小結

計算機存儲雙精度浮點數需要先把十進制數轉換為二進制的科學記數法的形式，然后計算機以自己的規則{符號位+(指數位+指數偏移量的二進制)+小數部分}存儲二進制的科學記數法。

因為存儲時有位數限制（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

我們可以這樣處理：

parseFloat((0.1 + 0.2).toFixed(10))

parseFloat((18466.67*100).toFixed(0))

責任編輯：華軒來源：今日頭條

Javascript 數字精度二進制

Javascript 數字精度丟失的問題，如何解決？

場景復現

浮點數

二進制

八進制

十進制

十六進制

問題分析

浮點型的存儲機制(單精度浮點數，雙精度浮點數)。

單精度浮點數（float）

雙精度浮點數（double）

浮點型常量 數有兩種表示形式：

小結

解決方案

我們可以這樣處理：

浮點型常量數有兩種表示形式：