「乾貨」細說 Javascript 中的浮點數精度丟失問題（內附好課推薦）

時間 2019-11-08

標籤乾貨細說 javascript 浮點數精度丟失問題推薦欄目 JavaScript 简体版

原文原文鏈接

前言

最近，朋友 L 問了我這樣一個問題：在 chrome 中的運算結果，爲何是這樣的？html

0.55 * 100 // 55.00000000000001
0.56 * 100 // 56.00000000000001
0.57 * 100 // 56.99999999999999
0.58 * 100 // 57.99999999999999
0.59 * 100 // 59
0.60 * 100 // 60
複製代碼

雖然我告訴他說，這是因爲浮點數精度問題致使的。但他仍是不太明白，爲什麼有的結果輸出整數，有的是以 ...001 的小數結尾，有的倒是以 ...999 的小數結尾，跟預想中的有差別。前端

這其實牽涉到了計算機原理的知識，真要解釋清楚什麼是浮點數，恐怕得分好幾個章節了。想深刻了解的同窗，能夠前往這篇文章細讀。今天咱們僅討論浮點數運算結果的成因，以及如何實現咱們指望的結果。git

浮點數與 IEEE 754

在解釋什麼是浮點數以前，讓咱們先從較爲簡單的小數點提及。github

小數點，在數制中表明一種對齊方式。好比要比較 1000 和 200 哪一個比較大，該怎麼作呢？必須把他們右對齊：面試

1000
 200
複製代碼

發現 1 比 0（前面補零）大，因此 1000 比較大。那麼若是要比較 1000 和 200.01 呢？這時候就不是右對齊了，而應該是以小數點對齊：算法

1000
 200.01
複製代碼

小數點的位置，在進製表示中是相當重要的。位置差一位總體就要差進制倍（十進制就是十倍）。在計算機中也是這樣，雖然計算機使用二進制，但在處理非整數時，也須要考慮小數點的位置問題。沒法對齊小數點，就沒法作加減法比較這樣的操做。chrome

接下來的一個重要概念：在計算機中的小數有兩種，定點和浮點。express

定點的意思是，小數點固定在 32 位中的某個位置，前面的是整數，後面的是小數。小數點具體固定在哪裏，能夠本身在程序中指定。定點數的優勢是很簡單，大部分運算實現起來和整數同樣或者略有變化，可是缺點則是表示範圍過小，精度不好，不能充分運用存儲單元。bash

浮點數就是設計來克服這個缺點的，它至關於一個定點數加上一個階碼，階碼錶示將這個定點數的小數點移動若干位。因爲能夠用階碼移動小數點，所以稱爲浮點數。咱們在寫程序時，用到小數的地方，用 float 類型表示，能夠方便快速地對小數進行運算。oracle

浮點數在 Javascript 中的存儲，與其餘語言如 Java 和 Python 不一樣。全部數字（包括整數和小數）都只有一種類型 — Number。它的實現遵循 IEEE 754 標準，使用64位精度來表示浮點數。它是目前最普遍使用的格式，該格式用 64 位二進制表示像下面這樣：

從上圖中能夠看出，這 64 位分爲三個部分：

符號位：1 位用於標誌位。用來表示一個數是正數仍是負數
指數位：11 位用於指數。這容許指數最大到 1024
尾數位：剩下的 52 位表明的是尾數，超出的部分自動進一舍零

精度丟哪兒去了？

問：要把小數裝入計算機，總共分幾步？

答：3 步。第一步：轉換成二進制第二步：用二進制科學計算法表示第三步：表示成 IEEE 754 形式但第一步和第三步都有可能 丟失精度。

十進制是給人看的。但在進行運算以前，必須先轉換爲計算機能處理的二進制。最後，當運算完畢後，再將結果轉換回十進制，繼續給人看。精度就丟失於這兩次轉換的過程當中。

十進制轉二進制

接下來，就具體說說轉換的過程。來看一個簡單的例子：

如何將十進制的 168.45 轉換爲二進制？
複製代碼

讓咱們拆爲兩個部分來解析：

一、整數部分。它的轉換方法是，除 2 取餘法。即每次將整數部分除以 2，餘數爲該位權上的數，而商繼續除以 2，餘數又爲上一個位權上的數，這個步驟一直持續下去，直到商爲 0 爲止，最後讀數時候，從最後一個餘數讀起，一直到最前面的一個餘數。

因此整數部分 168 的轉換過程以下：

第一步，將 168 除以 2，商 84，餘數爲 0。
第二步，將商 84 除以 2，商 42 餘數爲 0。
第三步，將商 42 除以 2，商 21 餘數爲 0。
第四步，將商 21 除以 2，商 10 餘數爲 1。
第五步，將商 10 除以 2，商 5 餘數爲 0。
第六步，將商 5 除以 2，商 2 餘數爲 1。
第七步，將商 2 除以 2，商 1 餘數爲 0。
第八步，將商 1 除以 2，商 0 餘數爲 1。
第九步，讀數。由於最後一位是通過屢次除以 2 才獲得的，所以它是最高位。讀數的時候，從最後的餘數向前讀，即 10101000。

二、小數部分。它的轉換方法是，乘 2 取整法。即將小數部分乘以 2，而後取整數部分，剩下的小數部分繼續乘以 2，而後再取整數部分，剩下的小數部分又乘以 2，一直取到小數部分爲 0 爲止。若是永遠不能爲零，就同十進制數的四捨五入同樣，按照要求保留多少位小數時，就根據後面一位是 0 仍是 1 進行取捨。若是是 0 就舍掉，若是是 1 則入一位，換句話說就是，0 舍 1 入。讀數的時候，要從前面的整數開始，讀到後面的整數。

因此小數部分 0.45 （保留到小數點第四位）的轉換過程以下：

第一步，將 0.45 乘以 2，得 0.9，則整數部分爲 0，小數部分爲 0.9。
第二步, 將小數部分 0.9 乘以 2，得 1.8，則整數部分爲 1，小數部分爲 0.8。
第三步, 將小數部分 0.8 乘以 2，得 1.6，則整數部分爲 1，小數部分爲 0.6。
第四步，將小數部分 0.6 乘以 2，得 1.2，則整數部分爲 1，小數部分爲 0.2。
第五步，將小數部分 0.2 乘以 2，得 0.4，則整數部分爲 0，小數部分爲 0.4。
第六步，將小數部分 0.4 乘以 2，得 0.8，則整數部分爲 0，小數部分爲 0.8。
...

能夠看到，從第六步開始，將無限循環第3、4、五步，一直乘下去，最後不可能獲得小數部分爲 0。所以，這個時候只好學習十進制的方法進行四捨五入了。可是二進制只有 0 和 1 兩個，因而就出現 0 舍 1 入的「口訣」了，這也是計算機在轉換中會產生偏差的根本緣由。可是因爲保留位數不少，精度很高，因此能夠忽略不計。

這樣，咱們就能夠得出十進制數 168.45 轉換爲二進制的結果，約等於 10101000.0111。

二進制轉十進制

它的轉換方法相對簡單些，按權相加法。就是將二進制每位上的數乘以權，而後相加之和便是十進制數。其中有兩個注意點：要知道二進制每位的權值，要能求出每位的值。

因此，將剛纔的二進制 10101000.0111 轉換爲十進制，獲得的結果就是 168.4375，再四捨五入一下，即 168.45。

解決方案

正如本文開頭所提到的，在 JavaScript 中進行浮點數的運算，會有很多奇葩的問題。在明白了產生問題的根本緣由以後，固然是想辦法解決啦~

一個簡單粗暴的建議是，使用像 mathjs 這樣的庫。它的 API 也挺簡單的：

// load math.js
const math = require('mathjs')

// functions and constants
math.round(math.e, 3)             // 2.718
math.atan2(3, -3) / math.pi       // 0.75

// expressions
math.eval('12 / (2.3 + 0.7)')     // 4
math.eval('12.7 cm to inch')      // 5 inch
math.eval('sin(45 deg) ^ 2')      // 0.5

// chaining
math.chain(3)
    .add(4)
    .multiply(2)
    .done()  // 14
複製代碼

但若是在工程中，沒有太多須要進行運算的場景的話，就不建議這麼作了。畢竟引入三方庫也是有成本的，不管是學習 API，仍是引入庫以後，帶來打包後的文件體積增積。

那麼，不引入庫該怎麼處理浮點數呢？

能夠從需求出發。例如，本文開頭的例子。能夠猜測到，需求多是要把小數轉爲百分比，一般會保留兩位小數。而在一些對數字較爲敏感的業務場景中，可能並不但願對數字進行四捨五入，因此 toFixed() 方法就無法用了。

一種思路是，將小數點像右多移動 n 位，取整後再除以 (10 * n)。好比這樣：

0.58 * 10000 / 100 // => 58
複製代碼

ok，搞定~

特別須要注意的是，在須要四捨五入的場景下，咱們會習慣用到內置方法 toFixed()，但它存在一些問題：

1.35.toFixed(1) // 1.4 正確
1.335.toFixed(2) // 1.33  錯誤
1.3335.toFixed(3) // 1.333 錯誤
1.33335.toFixed(4) // 1.3334 正確
1.333335.toFixed(5)  // 1.33333 錯誤
1.3333335.toFixed(6) // 1.333333 錯誤
複製代碼

另外，它的返回結果類型是 String。不能直接拿來作運算，由於計算機會認爲是 字符串拼接。