在日常一些需求中，總會遇到一些需要前端進行手動計算的場景，那么這里需要優(yōu)先考慮的則是數(shù)字精度問題！具體請看下面截圖

如圖所示，在JavaScript進行浮點型數(shù)據(jù)計算當中，會出現(xiàn)計算結(jié)果“不正確”的現(xiàn)象。

我們知道浮點型數(shù)據(jù)類型主要有：單精度float、雙精度double。

浮點型簡單來說就是表示帶有小數(shù)的數(shù)據(jù)，而恰恰小數(shù)點可以在相應(yīng)的二進制的不同位置浮動，可能是因為這樣就被定義成浮點型了。（不得不佩服這文化程度，定義個數(shù)據(jù)名稱都這么有深度~）

但是?。?！

JavaScript 存儲小數(shù)和其它語言如 Java 和 Python 都不同，JavaScript 中所有數(shù)字包括整數(shù)和小數(shù)都只有一種類型 即 Number類型 它的實現(xiàn)遵循 IEEE 754 標準，IEEE 754 標準的內(nèi)容都有什么，這個咱不用管，我們只需要記住以下一點：

javascript以64位雙精度浮點數(shù)存儲所有Number類型值，即計算機最多存儲64位二進制數(shù)。

對于double型數(shù)據(jù)(雙精度浮點數(shù))，其長度是8個字節(jié)(大小)，右邊52位用來表示小數(shù)點后面的數(shù)字，中間11位表示e(exponent)小數(shù)點移動的位數(shù)，左邊一位用來表示正負。如圖所示：

只要知道了這一點，那我們就可以對癥下藥（解決問題）：

解決方案 ①

Number(parseFloat(20.24*100).toPrecision(16))

存儲二進制時小數(shù)點的偏移量最大為52位，最多可表示的十進制為9007199254740992，對應(yīng)科學(xué)計數(shù)尾數(shù)是 9.007199254740992，這也是 JavaScript 最多能表示的精度。它的長度是 16，所以可以使用 toPrecision(16) 來做精度運算。

通過先轉(zhuǎn)為浮點型計算，然后做精度運算后再轉(zhuǎn)為Number類型即可。

解決方案 ②

通過引入number-precision進行計算，步驟如下：

• Install

npm install number-precision --save

• Methods

NP.strip(num)         // strip a number to nearest right number
NP.plus(num1, num2, num3, ...)   // addition, num + num2 + num3, two numbers is required at least.
NP.minus(num1, num2, num3, ...)  // subtraction, num1 - num2 - num3
NP.times(num1, num2, num3, ...)  // multiplication, num1 * num2 * num3
NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3
NP.round(num, ratio)  // round a number based on ratio

• Usage

import NP from 'number-precision'
NP.strip(0.09999999999999998); // = 0.1
NP.plus(0.1, 0.2);             // = 0.3, not 0.30000000000000004
NP.minus(1.0, 0.9);            // = 0.1, not 0.09999999999999998
NP.times(3, 0.3);              // = 0.9, not 0.8999999999999999
NP.divide(1.21, 1.1);          // = 1.1, not 1.0999999999999999
NP.round(0.105, 2);            // = 0.11, not 0.1

更多解決方案敬請關(guān)注后續(xù)更新，希望對您有幫助~

作者：京東零售?黃宏峰

來源：京東云開發(fā)者社區(qū) 轉(zhuǎn)載請注明來源文章來源地址http://www.zghlxwxcb.cn/news/detail-746052.html

到了這里，關(guān)于前端計算數(shù)字精度丟失問題解決方法記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！