你不是真正的四捨五入

前言

由於JavaScript採用IEEE-754標準表示浮點數，並不能精確表示許多實數，因此會有一些存在。本文就是對方面的問題作一個刨根揭底的探索以及摸索對應的解決方案。

1 問題

以前公司業務是跨境電商，會出現須要前端計算稅費的業務，好比下面這種

65.00（商品價格）* 0.119（稅費） = 7.734999999999999
複製代碼

當在這種計算的時候，會對精度進行控制，保持全部的數據都是2位小數，這時候本胖就會用toFixed這個函數

（65.00（商品價格）* 0.119（稅費））.toFixed(2) = 7.73（不符合預期）
複製代碼

本胖一開始看到這個答案的時候天真地認爲是瀏覽器拋錨了，因而用手機計算機算了一遍，答案是7.74，那麼問題來了，究竟是誰錯了呢？因而本胖查閱了不少相關資料以及動手實驗，最終有了本文的誕生。

2 浮點數

在解決問題以前，咱們須要來了解一下什麼是浮點數。

2.1 什麼是浮點數

在計算機系統的發展過程當中，曾經提出過多種方法表達實數。典型的好比相對於浮點數的定點數（Fixed Point Number）。在這種表達方式中，小數點固定的位於實數全部數字中間的某個位置。定點數表達法的缺點在於其形式過於僵硬，固定的小數點位置決定了固定位數的整數部分和小數部分，不利於同時表達特別大的數或者特別小的數。最終，絕大多數現代的計算機系統採納了所謂的浮點數表達方式。這種表達方式利用科學計數法來表達實數，即用一個尾數（Mantissa，尾數有時也稱爲有效數字——Significand；尾數其實是有效數字的非正式說法），一個基數（Base），一個指數（Exponent）以及一個表示正負的符號來表達實數。好比 123.45 用十進制科學計數法能夠表達爲 1.2345 × 102 ，其中 1.2345 爲尾數，10 爲基數，2 爲指數。浮點數利用指數達到了浮動小數點的效果，從而能夠靈活地表達更大範圍的實數。

計算機中是用有限的連續字節保存浮點數的。在 IEEE 標準中，浮點數是將特定長度的連續字節的全部二進制位分割爲特定寬度的符號域，指數域和尾數域三個域，其中保存的值分別用於表示給定二進制浮點數中的符號，指數和尾數。這樣，經過尾數和能夠調節的指數（因此稱爲"浮點"）就能夠表達給定的數值了。

2.2 IEEE 浮點數

計算機中是用有限的連續字節保存浮點數的。在 IEEE 標準中，浮點數是將特定長度的連續字節的全部二進制位分割爲特定寬度的符號域，指數域和尾數域三個域，其中保存的值分別用於表示給定二進制浮點數中的符號，指數和尾數。這樣，經過尾數和能夠調節的指數（因此稱爲"浮點"）就能夠表達給定的數值了。不少語言都是用這種規範的浮點數表示法，javascript也不例外。

IEEE 754 指定：

兩種基本的浮點格式：單精度和雙精度。

IEEE 單精度格式具備 24 位有效數字精度，並總共佔用 32 位。

IEEE 雙精度格式具備 53 位有效數字精度，並總共佔用 64 位。
複製代碼

2.3 範圍和精度

從上面能夠看到一個數在計算機裏面的表示位數是有限的，兒Javascript 做爲一門動態語言，其數字類型只有 number 一種。 nubmer 類型使用的就是 IEEE754 標準中的 雙精度浮點數。也就是說在js裏面一個數的存儲空間都是固定死的。下面來看一下這個定死的空間到底有多大。

從上圖能夠看出 在js裏面只有52位用來存放數據。

那麼問題來了，若是一個數52位存儲空間不夠，也就是二進制也會出現想十進制同樣的無限數的時候，會發生什麼事情呢？

IEEE754採用的浮點數舍入規則有時被稱爲舍入到偶數（Round to Even）

這有點像咱們熟悉的十進制的四捨五入，即不足一半則舍，一半以上（包括一半）則進。不過對於二進制浮點數而言，還多一條規矩，就是當須要舍入的值恰好是一半時，不是簡單地進，而是在先後兩個等距接近的可保存的值中，取其中最後一位有效數字爲零者。

3 計算精度

在解決問題以前，咱們還須要先理解計算過程 這裏用一個最經典的例子先來講明一下js中數據計算的過程

0.1 + 0.2
複製代碼

不少人都看到過這個表達式，那麼這個表達式背後究竟發生了什麼過程呢，請看本胖一步步說來

A 十進制轉二進制

第一步瀏覽器會將咱們看到的十進制0.1以及0.2都轉爲二級制的0.1和0.2

對於十進制轉二進制，大部分人都知道整數是除2取餘，逆序排列 直到商爲0時爲止。可是小數呢，規則是和整數不同的，規則以下

乘2取整，順序排列 直到積中的小數部分爲零
複製代碼

有了規則，咱們如今來對0.1，0.2作一個轉化

0.1轉爲二進制

二進制0.00011001100110011…(循環0011)     
 尾數爲1.1001100110011001100…1100（共52位，除了小數點左邊的1），指數爲-4（二進制移碼爲00000000010）,符號位爲0    
 計算機存儲爲：0 00000000100 10011001100110011…11001    
 由於尾數最多52位，因此實際存儲的值爲0.0001100110011001100110011001100110011001100110011001101
複製代碼

0.2轉爲二進制

二進制0.0011001100110011…(循環0011)    
 尾數爲1.1001100110011001100…1100（共52位，除了小數點左邊的1），指數爲-3（二進制移碼爲00000000011）,符號位爲0    
 存儲爲：0 00000000011 10011001100110011…11001    
 由於尾數最多52位，因此實際存儲的值爲0.001100110011001100110011001100110011001100110011001101
複製代碼

0.1的二進制 + 0.2的二進制 這裏要先說一下二進制的加法規則

計算機計算二進制加法是分三部，第一步爲將兩個加數轉換爲二進制數，計算兩個加數不須要進位的和，得出的結果。
第二部將兩個加數進行與運算（&）。
第三部利用與運算獲得結果進行左移運算（<<）（同時爲計算兩個加數須要進位的和）,得出結果。將或異運算的結果和左移運算的結果做爲兩個新的加數，重複此操做。直到當與運算的結果爲0，則異或運算的結果則爲兩個加數的和所對應的二進制數。
複製代碼

按照上述規則，咱們已經將0.1，0.2都完成了第一步，如今要進行第二三步。最終獲得以下結果

0.01001100110011001100110011001100110011001100110011001100 
複製代碼

而後將二進制所得的結果再轉爲十進制的表示，下面是二進制小數轉爲十進制的規則

整數部分是從右到左用二進制的每一個數去乘以2的相應次方,小數部分則是從左往右開始計算
複製代碼

最終獲得的結果就是0.30000000000000004

好了，一個0.1+0.2的計算過程大概就是這些過程。

4 四捨五入問題

4.1 問題

如今，咱們就能夠來問答一開始的問題了，爲何會出現文章一開始計算的問題狀況了。

1 65.00（商品價格）* 0.119（稅費） = 7.734999999999999 !== 7.735
複製代碼

2 (65.00（商品價格）* 0.119（稅費)).toFixed(2) = 7.73 != 7.74
複製代碼

第一個相乘爲何不等於7.735呢，本胖在第三節就給出瞭解釋，如今咱們來講一下第二個四捨五入精度問題。

對一個數進行四捨五入操做的時候，也是須要先將這個咱們理解的十進制數轉爲計算機理解的二進制數，而後用計算機的四捨五入規則（2.3 範圍和精度中已經說明）進行對應的操做。

當65.00（商品價格）* 0.119（稅費)的二進制存儲的時候就已是一個近似值了，而後再用二進制的四捨五入進行操做最後將獲得的結果再轉爲十進制固然會存在一個偏差。

看到這裏是否是就明白了爲何在調用toFixed()方法的時候會存在偏差，由於咱們看到的都是十進制的世界，而真實運算的倒是二進制的世界，不一樣的二個世界，不一樣的規則。

4.2 解決方案

前面說到十進制的小數在轉爲二進制的時候很容易出現沒法精確表示的狀況，可是十進制整數，在轉爲二進制的時候是均可以精確表示的，由於十進制整數轉二進制的規則以下

除2取餘，逆序排列，直到商爲0時爲止
複製代碼

因此機智的同窗就會想到下面的辦法

把小數放到位整數（乘倍數），再縮小回原來倍數（除倍數）
複製代碼

按照上面的辦法能夠寫出下面的函數

function toFixed(num, s) {
  var times = Math.pow(10, s)
  var des = num * times
  des = Math.round(des) / times
  return des + ''
}
複製代碼

注意這裏用了Math.round()這個方法將數字轉爲最接近的整數，若是用parseInt()的話須要手動加0.5。下面是這3個方法的主要區別。

1. Math.round

做用：四捨五入，返回參數+0.5後，向下取整。

Math.round(5.57)  //返回6

Math.round(2.4)   //返回2

Math.round(-1.5)  //返回-1

Math.round(-5.8)  //返回-6

複製代碼

2.parseInt

做用：解析一個字符串，並返回一個整數，這裏能夠簡單理解成返回捨去參數的小數部分後的整數。

parseInt(5.57)  //返回5

parseInt(2.4)  //返回2

parseInt(-1.5)  //返回-1

parseInt(-5.8)  //返回-5
複製代碼

5 總結

1.看似有窮的數字, 在計算機的二進制表示裏倒是無窮的，因爲存儲位數限制所以存在「捨去」，精度丟失就發生了。

2.解決精度丟失的方法就是把小數放到位整數（乘倍數），再縮小回原來倍數（除倍數）