一個函式讓你看懂 'Why 0.1+0.2!=0.3'

ConardLi發表於2019-03-04
函式

話不多說，先上程式碼

    function judgeFloat(n, m) {
      const binaryN = n.toString(2);
      const binaryM = m.toString(2);
      console.log(`${n}的二進位制是    ${binaryN}`);
      console.log(`${m}的二進位制是    ${binaryM}`);
      const MN = m + n;
      const accuracyMN = (m * 100 + n * 100) / 100;
      const binaryMN = MN.toString(2);
      const accuracyBinaryMN = accuracyMN.toString(2);
      console.log(`${n}+${m}的二進位制是${binaryMN}`);
      console.log(`${accuracyMN}的二進位制是    ${accuracyBinaryMN}`);
      console.log(`${n}+${m}的二進位制再轉成十進位制是${to10(binaryMN)}`);
      console.log(`${accuracyMN}的二進位制是再轉成十進位制是${to10(accuracyBinaryMN)}`);
      console.log(`${n}+${m}在js中計算是${(to10(binaryMN) === to10(accuracyBinaryMN)) ? '' : '不'}準確的`);
    }
    function to10(n) {
      const pre = (n.split('.')[0] - 0).toString(2);
      const arr = n.split('.')[1].split('');
      let i = 0;
      let result = 0;
      while (i < arr.length) {
        result += arr[i] * Math.pow(2, -(i + 1));
        i++;
      }
      return result;
    }
    judgeFloat(0.1, 0.2);
    judgeFloat(0.6, 0.7);
複製程式碼

由於JavaScript中沒有將小數的二進位制轉換成十進位制的方法，於是手動實現了一個。

image

先來一個簡單的結論

計算機中所有的資料都是以二進位制儲存的，所以在計算時計算機要把資料先轉換成二進位制進行計算，然後在把計算結果轉換成十進位制。

由上面的程式碼不難看出，在計算0.1+0.2時，二進位制計算髮生了精度丟失，導致再轉換成十進位制後和預計的結果不符。

其實有些標題黨了，一個函式並不能讓你深入理解，還得繼續看下面...

對結果的分析—更多的問題

0.1和0.2的二進位制都是以1100無限迴圈的小數，下面逐個來看JS幫我們計算所得的結果：

0.1的二進位制：

0.0001100110011001100110011001100110011001100110011001101
複製程式碼

0.2的二進位制：

0.001100110011001100110011001100110011001100110011001101
複製程式碼

理論上講，由上面的結果相加應該：：

0.0100110011001100110011001100110011001100110011001100111
複製程式碼

實際JS計算得到的0.1+0.2的二進位制

0.0100110011001100110011001100110011001100110011001101
複製程式碼

作為一個程式碼強迫症的我又產生的新的問題：

Why js計算出的 0.1的二進位制 是這麼多位而不是更多位？？？

Why js計算的（0.1+0.2）的二進位制和我們自己計算的（0.1+0.2）的二進位制結果不一樣呢？？？

Why 0.1的二進位制 + 0.2的二進位制 != 0.3的二進位制？？？

js對二進位制小數的儲存方式

小數的二進位制大多數都是無限迴圈的，JavaScript是怎麼來儲存他們的呢？

在ECMAScript®語言規範中可以看到，ECMAScript中的Number型別遵循IEEE 754標準。使用64位固定長度來表示。

事實上有很多語言的數字型別都遵循這個標準，例如JAVA,所以很多語言同樣有著上面同樣的問題。

所以下次遇到這種問題不要上來就噴JavaScript...

有興趣可以看看下這個網站0.30000000000000004.com/，是的，你沒看錯，就是0.30000000000000004.com/！！！

IEEE 754

IEEE754標準包含一組實數的二進位制表示法。它有三部分組成：

  • 符號位

  • 指數位

  • 尾數位

三種精度的浮點數各個部分位數如下：

image

JavaScript使用的是64位雙精度浮點數編碼，所以它的符號位佔1位，指數位佔11位，尾數位佔52位。

下面我們在理解下什麼是符號位、指數位、尾數位，以0.1為例：

它的二進位制為：0.0001100110011001100...

為了節省儲存空間，在計算機中它是以科學計數法表示的，也就是

1.100110011001100... X 2-4

如果這裡不好理解可以想一下十進位制的數：

1100的科學計數法為11 X 102

所以：

image

符號位就是標識正負的，1表示負，0表示正；

指數位儲存科學計數法的指數；

尾數位儲存科學計數法後的有效數字；

所以我們通常看到的二進位制，其實是計算機實際儲存的尾數位。

js中的toString(2)

由於尾數位只能儲存52個數字，這就能解釋toString(2)的執行結果了：

如果計算機沒有儲存空間的限制，那麼0.1的二進位制應該是：

0.00011001100110011001100110011001100110011001100110011001...
複製程式碼

科學計數法尾數位

1.1001100110011001100110011001100110011001100110011001...
複製程式碼

但是由於限制，有效數字第53位及以後的數字是不能儲存的，它遵循，如果是1就向前一位進1，如果是0就捨棄的原則。

0.1的二進位制科學計數法第53位是1，所以就有了下面的結果：

0.0001100110011001100110011001100110011001100110011001101
複製程式碼

0.2有著同樣的問題，其實正是由於這樣的儲存，在這裡有了精度丟失，導致了0.1+0.2!=0.3。

事實上有著同樣精度問題的計算還有很多，我們無法把他們都記下來，所以當程式中有數字計算時，我們最好用工具庫來幫助我們解決，下面是兩個推薦使用的開源庫：

下面我們再來看上面的其他兩個問題。

Why JavaScript計算出的 0.1的二進位制 是這麼多位而不是更多位？？？

上面的toString原理幫我們解答了這個問題，在有效數字第53位以後的數字將遵循1進0舍的原則，記憶體中只允許儲存52位有效數字。

Why JavaScript計算的（0.1+0.2）的二進位制和我們自己計算的（0.1+0.2）的二進位制結果不一樣呢？？？

我們自己計算的0.1+0.2：：

0.0100110011001100110011001100110011001100110011001100111
複製程式碼

實際上這個結果的有效數字已經超過了52位，我們要從末尾進行1進0舍得到下面的結果

0.0100110011001100110011001100110011001100110011001101
複製程式碼

JavaScript能表示的最大數字

由與IEEE 754雙精度64位規範的限制：

指數位能表示的最大數字：1023(十進位制)

尾數位能表達的最大數字即尾數位都位1的情況

所以JavaScript能表示的最大數字即位

1.111...X 21023 這個結果轉換成十進位制是1.7976931348623157e+308,這個結果即為Number.MAX_VALUE。

最大安全數字

JavaScript中Number.MAX_SAFE_INTEGER表示最大安全數字,計算結果是9007199254740991，即在這個數範圍內不會出現精度丟失（小數除外）,這個數實際上是1.111...X 252。

我們同樣可以用一些開源庫來處理大整數：

其實官方也考慮到了這個問題，bigInt型別在es10中被提出，現在Chrome中已經可以使用。

bigInt型別

BigInt 是第七種原始型別。

BigInt 是一個任意精度的整數。這意味著變數現在可以計算9007199254740991即最大安全整數以上的數字。

const b = 1n;  // 追加 n 以建立 BigInt
複製程式碼

在過去，不支援大於 9007199254740992 的整數值。如果超過，該值將鎖定為MAX_SAFE_INTEGER + 1:

const limit = Number.MAX_SAFE_INTEGER;
⇨ 9007199254740991
limit + 1;
⇨ 9007199254740992
limit + 2;
⇨ 9007199254740992 <--- MAX_SAFE_INTEGER + 1 exceeded
const larger = 9007199254740991n;
⇨ 9007199254740991n
const integer = BigInt(9007199254740991); // initialize with number
⇨ 9007199254740991n
const same = BigInt("9007199254740991"); // initialize with "string"
⇨ 9007199254740991n
複製程式碼

typeof

typeof 10;
⇨ 'number'
typeof 10n;
⇨ 'bigint'
複製程式碼

相關文章