前言

前端開發(fā)中難免會遇到價格和金額計算的需求，這類需求所要計算的數(shù)值大多數(shù)情況下是要求精確到小數(shù)點后的多少位。但是因為JS語言本身的缺陷，在處理浮點數(shù)的運算時會出現(xiàn)一些奇怪的問題，導(dǎo)致計算不精確。

本文嘗試從現(xiàn)象入手，分析造成這一問題原因，并總結(jié)和整合一些通用的解決方案，以供大家參考。

現(xiàn)象回顧

下面的是JS進(jìn)行數(shù)值運算過程中常見的問題，這個問題有個專業(yè)的名稱叫精度丟失。

在 JavaScript 中整數(shù)和浮點數(shù)都屬于 Number 數(shù)據(jù)類型，所有的數(shù)字都是以 64 位浮點數(shù)形式存儲，整數(shù)也是如此。所以我們在打印 1.00 這樣的浮點數(shù)的結(jié)果是 1 而非 1.00 。在一些特殊的數(shù)值表示中，例如金額，這樣看上去有點別扭，但是至少值是正確了。然而要命的是，當(dāng)浮點數(shù)做數(shù)學(xué)運算的時候，你經(jīng)常會發(fā)現(xiàn)一些問題，舉幾個例子：

// 加法
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001
2.22 + 0.1 = 2.3200000000000003

// 減法
1.5 - 1.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998

// 乘法
19.9 * 100 = 1989.9999999999998
19.9 * 10 * 10 = 1990
1306377.64 * 100 = 130637763.99999999
1306377.64 * 10 * 10 = 130637763.99999999
0.7 * 180 = 125.99999999999999
9.7 * 100 = 969.9999999999999
39.7 * 100 = 3970.0000000000005

// 除法
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999

問題分析

JavaScript 里的數(shù)字是采用 IEEE 754 標(biāo)準(zhǔn)的 64 位雙精度浮點數(shù)。

該規(guī)范定義了浮點數(shù)的格式，對于 64 位的浮點數(shù)在內(nèi)存中的表示，最高的 1 位是符號位，接著的 11 位是指數(shù)，剩下的 52 位為有效數(shù)字，具體對應(yīng)如下：

• 第 0 位：符號位， s 表示 ，0 表示正數(shù)，1 表示負(fù)數(shù)；
• 第 1 位到第 11 位：儲存指數(shù)部分， e 表示 ；
• 第 12 位到第 63 位：儲存小數(shù)部分（即有效數(shù)字），f 表示，

符號位決定了一個數(shù)的正負(fù)，指數(shù)部分決定了數(shù)值的大小，小數(shù)部分決定了數(shù)值的精度。

IEEE 754 規(guī)定，有效數(shù)字第一位默認(rèn)總是 1，不保存在 64 位浮點數(shù)之中。也就是說，有效數(shù)字總是 1.xx…xx 的形式，其中 xx..xx 的部分保存在 64 位浮點數(shù)之中，最長可能為 52 位。

因此，JavaScript 提供的有效數(shù)字最長為 53 個二進(jìn)制位（64 位浮點的后 52 位 + 有效數(shù)字第一位的 1）。

那么，JavaScript 在計算 0.1 + 0.2 時，到底發(fā)生了什么呢？

首先，十進(jìn)制的 0.1 和 0.2 都會被轉(zhuǎn)換成二進(jìn)制，但由于浮點數(shù)用二進(jìn)制表達(dá)時是無窮的，就成了下面的樣子。

0.1 -> 0.0001100110011001...(無限)
0.2 -> 0.0011001100110011...(無限)

IEEE 754 標(biāo)準(zhǔn)的 64 位雙精度浮點數(shù)的小數(shù)部分最多支持 53 位二進(jìn)制位，所以兩者相加之后得到的二進(jìn)制就是下面的樣子。

0.0100110011001100110011001100110011001100110011001100

最終，因浮點數(shù)小數(shù)位的限制而截斷的二進(jìn)制數(shù)字，再轉(zhuǎn)換為十進(jìn)制，就成了 0.30000000000000004，所以在進(jìn)行算術(shù)計算時就產(chǎn)生了誤差。

解決方案

通常情況下對計算精度要求高的業(yè)務(wù)場景都應(yīng)該交給后端去計算和存儲，因為后端有成熟的方案和工具來解決這種計算問題。

這里是對網(wǎng)上常見的幾個解決方案的匯總和整理，但是方案一和方案二都存在一定的局限性，我會在對應(yīng)的方案里進(jìn)行說明。通常我們前端做這類運算通常只用于表現(xiàn)層，所以這兩個方案基本是夠用的。

方案一

在應(yīng)對確定精度浮點數(shù)運算時，可以把金額轉(zhuǎn)換成整數(shù)進(jìn)行運算，最后再將結(jié)果轉(zhuǎn)換成真實金額。

// 定義金額（保留兩位小數(shù)）
const amount1 = 0.10;
const amount2 = 0.20;

// 轉(zhuǎn)整數(shù)運算，并還原成真實金額
const result = ((amount1 * 100) + (amount2 * 100)) / 100;

// 結(jié)果
console.log(result); // 0.3

// 直接運算
console.log(amount1 + amount2); // 0.30000000000000004

需要注意的是上面的例子只能處理最多兩位小數(shù)的運算場景，如果小數(shù)位不確定這個方法是行不通的。

方案二

JavaScript 內(nèi)置的 toFixed() 方法可以將數(shù)字轉(zhuǎn)換成保留指定小數(shù)位的字符串。這個方法適用于簡單的金額計算。但需要注意舍入誤差，因為轉(zhuǎn)換后是字符串，失去了浮點數(shù)的特性，最后的結(jié)果坑你存在微小的誤差。

// 定義金額
const amount1 = 0.1;
const amount2 = 0.2;

// 加法運算
const result = (amount1 + amount2).toFixed(2); // 保留兩位小數(shù)

// 注意這里運算的結(jié)果應(yīng)該是：0.30000000000000004
console.log(result); // 輸出 "0.30"

toFixed 它是一個四舍六入五成雙的詭異的方法(也叫銀行家算法)。"四舍六入五成雙"含義：對于位數(shù)很多的近似數(shù)，當(dāng)有效位數(shù)確定后，其后面多余的數(shù)字應(yīng)該舍去，只保留有效數(shù)字最末一位，這種修約（舍入）規(guī)則是“四舍六入五成雙”，也即“4舍6入5湊偶”這里“四”是指≤4 時舍去，"六"是指≥6時進(jìn)上，"五"指的是根據(jù)5后面的數(shù)字來定，當(dāng)5后有數(shù)時，舍5入1；當(dāng)5后無有效數(shù)字時，需要分兩種情況來講：5前為奇數(shù)，舍5入1；5前為偶數(shù)，舍5不進(jìn)（0是偶數(shù)）。

第三方庫

現(xiàn)代前端發(fā)展至今，已經(jīng)有很多成熟的類庫來幫助我們解決此類問題，這類類庫通常有很好的通用性和兼容性。

下面我將推薦幾個人氣較高的數(shù)字計算類庫。

Math.js

Math.js 是專門為 JavaScript 和 Node.js 提供的一個廣泛的數(shù)學(xué)庫。它具有靈活的表達(dá)式解析器，支持符號計算，配有大量內(nèi)置函數(shù)和常量，并提供集成解決方案來處理不同的數(shù)據(jù)類型像數(shù)字，大數(shù)字 (超出安全數(shù)的數(shù)字)，復(fù)數(shù)，分?jǐn)?shù)，單位和矩陣，功能強(qiáng)大，易于使用。

官網(wǎng)：mathjs.org^[1]

GitHub：GitHub - josdejong/mathjs: An extensive math library for JavaScript and Node.js^[2]

decimal.js

為 JavaScript 提供十進(jìn)制類型的任意精度數(shù)值。

官網(wǎng)：decimal.js API^[3]

GitHub：GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScript^[4]

big.js

Big.js 是一個用于處理任意精度的大數(shù)運算的 JavaScript 庫。它解決了 JavaScript 中處理大數(shù)運算時精度丟失的問題，提供了更高精度的計算能力。

Big.js 庫的特點包括：

• 任意精度：Big.js 允許您處理任意精度的數(shù)字，而不受 JavaScript 內(nèi)置數(shù)字類型的限制。
• 高精度計算：Big.js 提供了精確的加法、減法、乘法、除法和取余等運算，以及比較和舍入等功能。
• 可配置的精度和舍入規(guī)則：您可以自定義 Big.js 運算的精度和舍入規(guī)則，以滿足特定的需求。
• 支持鏈?zhǔn)讲僮鳎耗梢允褂面準(zhǔn)秸{(diào)用來執(zhí)行多個運算，使代碼更簡潔易讀。
• 適用于瀏覽器和 Node.js：Big.js 可以在瀏覽器和 Node.js 環(huán)境中使用，兼容性良好。

Big.js 庫非常適用于需要高精度計算的場景，如金融、密碼學(xué)、科學(xué)計算和大數(shù)據(jù)處理等。它允許開發(fā)人員在 JavaScript 中進(jìn)行準(zhǔn)確的數(shù)字計算，避免了精度損失帶來的問題。

官網(wǎng)：big.js API^[5]

GitHub：GitHub - MikeMcl/big.js: A small, fast JavaScript library for arbitrary-precision decimal arithmetic.^[6]

總結(jié)

本文對 Javascript 中浮點數(shù)運算出現(xiàn)的精度丟失問題進(jìn)行了還原，分析了問題產(chǎn)生的原因在于二進(jìn)制本身。同時給出了三個網(wǎng)絡(luò)上比較成熟的解決方案，其中第一和第二方案基本可以滿足大部分開發(fā)場景，如果不能滿足就使用類庫。

最后，建議所有對運算精度要求極高的業(yè)務(wù)場景都放到后端去運算，切記。