一個函式讓你看懂 'Why 0.1+0.2!=0.3'
話不多說，先上程式碼
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 中沒有將小數的 二進位制 轉換成 十進位制 的方法，於是手動實現了一個。
先來一個簡單的結論
計算機中所有的資料都是以 二進位制 儲存的，所以在計算時計算機要把資料先轉換成 二進位制 進行計算，然後在把計算結果轉換成 十進位制 。
由上面的程式碼不難看出，在計算 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+0.2）的二進位制和我們自己計算的（0.1+0.2）的二進位制結果不一樣呢？？？
Why 0.1的二進位制 + 0.2的二進位制 != 0.3的二進位制？？？
js對二進位制小數的儲存方式
小數的 二進位制 大多數都是無限迴圈的， JavaScript 是怎麼來儲存他們的呢？
在 ECMAScript®語言規範 中可以看到， ECMAScript 中的 Number 型別遵循 IEEE 754 標準。使用64位固定長度來表示。
事實上有很多語言的數字型別都遵循這個標準，例如 JAVA ,所以很多語言同樣有著上面同樣的問題。
所以下次遇到這種問題不要上來就噴 JavaScript ...
有興趣可以看看下這個網站 http://0.30000000000000004.com/ ，是的，你沒看錯，就是 http://0.30000000000000004.com/ ！！！
IEEE 754
IEEE754標準包含一組實數的二進位制表示法。它有三部分組成：
- 符號位
- 指數位
- 尾數位
三種精度的浮點數各個部分位數如下：
JavaScript 使用的是64位雙精度浮點數編碼，所以它的 符號位 佔 1 位，指數位佔 11 位，尾數位佔 52 位。
下面我們在理解下什麼是 符號位 、 指數位 、 尾數位 ，以 0.1 為例：
它的二進位制為： 0.0001100110011001100...
為了節省儲存空間，在計算機中它是以科學計數法表示的，也就是
1.100110011001100... X 2 -4
如果這裡不好理解可以想一下十進位制的數：
1100 的科學計數法為 11 X 10 2
所以：
符號位 就是標識正負的， 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 2 1023 這個結果轉換成十進位制是 1.7976931348623157e+308 ,這個結果即為 Number.MAX_VALUE 。
最大安全數字
JavaScript中 Number.MAX_SAFE_INTEGER 表示最大安全數字,計算結果是 9007199254740991 ，即在這個數範圍內不會出現精度丟失（小數除外）,這個數實際上是 1.111... X 2 52 。
我們同樣可以用一些開源庫來處理大整數：
其實官方也考慮到了這個問題， 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'