JavaScript 深刻系列之浮點數精度

前言

0.1 + 0.2 是否等於 0.3 做爲一道經典的面試題，已經廣外熟知，提及緣由，你們能回答出這是浮點數精度問題致使，也能辯證的看待這並不是是 ECMAScript 這門語言的問題，今天就是具體看一下背後的緣由。

數字類型

ECMAScript 中的 Number 類型使用 IEEE754 標準來表示整數和浮點數值。所謂 IEEE754 標準，全稱 IEEE 二進制浮點數算術標準，這個標準定義了表示浮點數的格式等內容。

在 IEEE754 中，規定了四種表示浮點數值的方式：單精確度（32位）、雙精確度（64位）、延伸單精確度、與延伸雙精確度。像 ECMAScript 採用的就是雙精確度，也就是說，會用 64 位字節來儲存一個浮點數。

浮點數轉二進制

咱們來看下 1020 用十進制的表示：

1020 = 1 * 10^3 + 0 * 10^2 + 2 * 10^1 + 0 * 10^0

因此 1020 用十進制表示就是 1020……(哈哈)

若是 1020 用二進制來表示呢？

1020 = 1 * 2^9 + 1 * 2^8 + 1 * 2^7 + 1 * 2^6 + 1 * 2^5 + 1 * 2^4 + 1 * 2^3 + 1 * 2^2 + 0 * 2^1 + 0 * 2^0

因此 1020 的二進制爲 1111111100

那若是是 0.75 用二進制表示呢？同理應該是：

0.75 = a * 2^-1 + b * 2^-2 + c * 2^-3 + d * 2^-4 + ...

由於使用的是二進制，這裏的 abcd……的值的要麼是 0 要麼是 1。

那怎麼算出 abcd…… 的值呢，咱們能夠兩邊不停的乘以 2 算出來，解法以下：

0.75 = a * 2^-1 + b * 2^-2 + c * 2^-3 + d * 2^-4...

兩邊同時乘以 2

1 + 0.5 = a * 2^0 + b * 2^-1 + c * 2^-2 + d * 2^-3... (因此 a = 1)

剩下的：

0.5 = b * 2^-1 + c * 2^-2 + d * 2^-3...

再同時乘以 2

1 + 0 = b * 2^0 + c * 2^-2 + d * 2^-3... (因此 b = 1)

因此 0.75 用二進制表示就是 0.ab，也就是 0.11

然而不是全部的數都像 0.75 這麼好算，咱們來算下 0.1：

0.1 = a * 2^-1 + b * 2^-2 + c * 2^-3 + d * 2^-4 + ...

0 + 0.2 = a * 2^0 + b * 2^-1 + c * 2^-2 + ...   (a = 0)
0 + 0.4 = b * 2^0 + c * 2^-1 + d * 2^-2 + ...   (b = 0)
0 + 0.8 = c * 2^0 + d * 2^-1 + e * 2^-2 + ...   (c = 0)
1 + 0.6 = d * 2^0 + e * 2^-1 + f * 2^-2 + ...   (d = 1)
1 + 0.2 = e * 2^0 + f * 2^-1 + g * 2^-2 + ...   (e = 1)
0 + 0.4 = f * 2^0 + g * 2^-1 + h * 2^-2 + ...   (f = 0)
0 + 0.8 = g * 2^0 + h * 2^-1 + i * 2^-2 + ...   (g = 0)
1 + 0.6 = h * 2^0 + i * 2^-1 + j * 2^-2 + ...   (h = 1)
....

而後你就會發現，這個計算在不停的循環，因此 0.1 用二進制表示就是 0.00011001100110011……

浮點數的存儲

雖然 0.1 轉成二進制時是一個無限循環的數，但計算機總要儲存吧，咱們知道 ECMAScript 使用 64 位字節來儲存一個浮點數，那具體是怎麼儲存的呢？這就要說回 IEEE754 這個標準了，畢竟是這個標準規定了存儲的方式。

這個標準認爲，一個浮點數 (Value) 能夠這樣表示：

Value = sign * exponent * fraction

看起來很抽象的樣子，簡單理解就是科學計數法……

好比 -1020，用科學計數法表示就是:

-1 * 10^3 * 1.02

sign 就是 -1，exponent 就是 10^3，fraction 就是 1.02

對於二進制也是同樣，以 0.1 的二進制 0.00011001100110011…… 這個數來講：

能夠表示爲：

1 * 2^-4 * 1.1001100110011……

其中 sign 就是 1，exponent 就是 2^-4，fraction 就是 1.1001100110011……

而當只作二進制科學計數法的表示時，這個 Value 的表示能夠再具體一點變成：

V = (-1)^S * (1 + Fraction) * 2^E

(若是全部的浮點數均可以這樣表示，那麼咱們存儲的時候就把這其中會變化的一些值存儲起來就行了)

咱們來一點點看：

(-1)^S 表示符號位，當 S = 0，V 爲正數；當 S = 1，V 爲負數。

再看 (1 + Fraction)，這是由於全部的浮點數均可以表示爲 1.xxxx * 2^xxx 的形式，前面的必定是 1.xxx，那乾脆咱們就不存儲這個 1 了，直接存後面的 xxxxx 好了，這也就是 Fraction 的部分。

最後再看 2^E

若是是 1020.75，對應二進制數就是 1111111100.11，對應二進制科學計數法就是 1 1.11111110011 2^9，E 的值就是 9，而若是是 0.1 ，對應二進制是 1 1.1001100110011…… 2^-4， E 的值就是 -4，也就是說，E 既多是負數，又多是正數，那問題就來了，那咱們該怎麼儲存這個 E 呢？

咱們這樣解決，假如咱們用 8 位字節來存儲 E 這個數，若是隻有正數的話，儲存的值的範圍是 0 ~ 254，而若是要儲存正負數的話，值的範圍就是 -127~127，咱們在存儲的時候，把要存儲的數字加上 127，這樣當咱們存 -127 的時候，咱們存 0，當存 127 的時候，存 254，這樣就解決了存負數的問題。對應的，當取值的時候，咱們再減去 127。

因此呢，真到實際存儲的時候，咱們並不會直接存儲 E，而是會存儲 E + bias，當用 8 個字節的時候，這個 bias 就是 127。

因此，若是要存儲一個浮點數，咱們存 S 和 Fraction 和 E + bias 這三個值就行了，那具體要分配多少個字節位來存儲這些數呢？IEEE754 給出了標準：

在這個標準下：

咱們會用 1 位存儲 S，0 表示正數，1 表示負數。

用 11 位存儲 E + bias，對於 11 位來講，bias 的值是 2^11 - 1，也就是 1023。

用 52 位存儲 Fraction。

舉個例子，就拿 0.1 來看，對應二進制是 1 1.1001100110011…… 2^-4， Sign 是 0，E + bias 是 -4 + 1024 = 1019，1019 用二進制表示是 1111111011，Fraction 是 1001100110011……

對應 64 個字節位的完整表示就是：

0 01111111011 1001100110011001100110011001100110011001100110011010

同理, 0.2 表示的完整表示是：

0 01111111100 1001100110011001100110011001100110011001100110011010

因此當 0.1 存下來的時候，就已經發生了精度丟失，當咱們用浮點數進行運算的時候，使用的實際上是精度丟失後的數。

浮點數的運算

關於浮點數的運算，通常由如下五個步驟完成：對階、尾數運算、規格化、舍入處理、溢出判斷。咱們來簡單看一下 0.1 和 0.2 的計算。

首先是對階，所謂對階，就是把階碼調整爲相同，好比 0.1 是 1.1001100110011…… * 2^-4，階碼是 -4，而 0.2 就是 1.10011001100110...* 2^-3，階碼是 -3，兩個階碼不一樣，因此先調整爲相同的階碼再進行計算，調整原則是小階對大階，也就是 0.1 的 -4 調整爲 -3，對應變成 0.11001100110011…… * 2^-3

接下來是尾數計算:

0.1100110011001100110011001100110011001100110011001101
+ 1.1001100110011001100110011001100110011001100110011010
————————————————————————————————————————————————————————
 10.0110011001100110011001100110011001100110011001100111

咱們獲得結果爲 10.0110011001100110011001100110011001100110011001100111 * 2^-3

將這個結果處理一下，即結果規格化，變成 1.0011001100110011001100110011001100110011001100110011(1) * 2^-2

括號裏的 1 意思是說計算後這個 1 超出了範圍，因此要被捨棄了。

再而後是舍入，四捨五入對應到二進制中，就是 0 舍 1 入，由於咱們要把括號裏的 1 丟了，因此這裏會進一，結果變成

1.0011001100110011001100110011001100110011001100110100 * 2^-2

原本還有一個溢出判斷，由於這裏不涉及，就不講了。

因此最終的結果存成 64 位就是

0 01111111101 0011001100110011001100110011001100110011001100110100

將它轉換爲10進制數就獲得 0.30000000000000004440892098500626

由於兩次存儲時的精度丟失加上一次運算時的精度丟失，最終致使了 0.1 + 0.2 !== 0.3

其餘

// 十進制轉二進制
parseFloat(0.1).toString(2);
=> "0.0001100110011001100110011001100110011001100110011001101"

// 二進制轉十進制
parseInt(1100100,2)
=> 100

// 以指定的精度返回該數值對象的字符串表示
(0.1 + 0.2).toPrecision(21)
=> "0.300000000000000044409"
(0.3).toPrecision(21)
=> "0.299999999999999988898"

參考

1. why is 0.1+0.2 not equal to 0.3 in most programming languages
2. IEEE-754標準與浮點數運算

深刻系列

JavaScript深刻系列目錄地址：https://github.com/mqyqingfen...。

JavaScript深刻系列預計寫十五篇左右，旨在幫你們捋順JavaScript底層知識，重點講解如原型、做用域、執行上下文、變量對象、this、閉包、按值傳遞、call、apply、bind、new、繼承等難點概念。

若是有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。若是喜歡或者有所啓發，歡迎 star，對做者也是一種鼓勵。

再其餘

21屆即將參加各大廠校招，面前端的同窗看過來，說出你最近參加面試的題目，我來幫你寫答案！！！是的，你沒有看錯，不只是我，我號召了一整個淘系前端團隊幫你寫答案，我只能幫你到這了😂😂😂

若是你有題目的話，能夠聯繫我, 微信 mqyqingfeng 或者掃碼入羣