一個函式讓你看懂 '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'