場(chǎng)景復(fù)現(xiàn)

const value1 = 15966.2 + 3103.3 + 1562.9 + 933.9
console.log('?? ~ value1:', value1)

上面的這些數(shù)值相加的結(jié)果應(yīng)該是21566.3

但是在瀏覽器中運(yùn)算的時(shí)候，結(jié)果卻變成了21566.300000000003

那么為什么會(huì)這樣呢？

這是因?yàn)?JavaScript 內(nèi)部的數(shù)字均以 IEEE 754 標(biāo)準(zhǔn)的雙精度浮點(diǎn)數(shù)格式存儲(chǔ)，這種格式只能精確表示有限個(gè)小數(shù)，而對(duì)于一些無限循環(huán)小數(shù)或無理數(shù)，無法精確表示，就會(huì)出現(xiàn)精度丟失的情況。

有一些前端的面試題就會(huì)問你 為什么0.1+0.2的結(jié)果不等于0.3

總之， 前端計(jì)算存在這么一個(gè)問題。

幾種解決方案對(duì)比

轉(zhuǎn)化為整數(shù)計(jì)算

function addDecimals(num1, num2) {
    const multiplier = Math.pow(
      10,
      Math.max(
        num1.toString().split('.')[1]?.length || 0,
        num2.toString().split('.')[1]?.length || 0
      )
    )
    return (
      (Math.round(num1 * multiplier) + Math.round(num2 * multiplier)) /
      multiplier
    )
}
console.log(addDecimals(0.1, 0.2)) // 0.3
console.log(addDecimals(0.15, 0.15)) // 0.3

這種方只適合小數(shù)量計(jì)算，大數(shù)還是不行

用toFixed()格式化

這種方式?jīng)]有什么意義，只能展示的時(shí)候用，并且也沒有解決這個(gè)問題

位數(shù)放大之后會(huì)發(fā)現(xiàn)還是有問題

字符串模擬運(yùn)算

這種方式是目前最為靠譜的一種方式，從源頭上解決了這個(gè)問題。

很多處理浮點(diǎn)數(shù)相關(guān)的第三方庫(kù)實(shí)現(xiàn)原理都是基于這種方式來實(shí)現(xiàn)的

第三方庫(kù)

• Math.js：一個(gè)用于 JavaScript 和 Node.js 的擴(kuò)展數(shù)學(xué)庫(kù)
• decimal.js: 計(jì)算任意精度的十進(jìn)制類型。
• big.js：一個(gè)小型，快速，易于使用的庫(kù)，用于任意精度的十進(jìn)制算術(shù)運(yùn)算。
• bignumber.js： 一個(gè)用于任意精度算術(shù)的 JavaScript 庫(kù)。

這些第三方庫(kù)都可以解決這個(gè)問題

bignumber.js的使用

這邊我以這個(gè)庫(kù)為例來解決這個(gè)問題，這個(gè)庫(kù)的解決原理就是前面提到的字符串模擬運(yùn)算。

安裝

用包管理器安裝

npm install bignumber.js

相加

let sum = new BigNumber(0)
const numbers = [15966.2, 3103.3, 1562.9, 933.9]
numbers.forEach((value) => (sum = sum.plus(value)))
console.log('?? ~ numbers:', sum.toString())

結(jié)果如下：

相減

const numbers = [15966.2, 3103.3, 1562.9, 933.9]
const value1 = new BigNumber(15966.2)
console.log('?? ~ value1:', value1.minus(1.1231).toString())

結(jié)果如下:

相乘

const value1 = new BigNumber(15966.2)
console.log('?? ~ value1:', value1.multipliedBy(21).toString())

結(jié)果如下：

相除

const value1 = new BigNumber(15966.2)
console.log('?? ~ value1:', value1.div(21).toString())

結(jié)果如下：

判斷是否相等和比較大小

const value1 = new BigNumber(15966.2)
const value2 = new BigNumber(15966.3)
const value3 = new BigNumber(15966.2)
const value4 = new BigNumber(15966.1)
console.log('15966.2 -> 15966.3 ', value1.comparedTo(value2))
console.log('15966.2 -> 15966.2 ', value1.comparedTo(value3))
console.log('15966.2 -> 15966.1 ', value1.comparedTo(value4))

結(jié)果如下：

• -1: 小于
• 0: 相等
• 1: 大于

結(jié)尾

像這種涉及到精度計(jì)算的，開發(fā)中最好都是直接用第三方庫(kù)去處理，避免出現(xiàn)計(jì)算錯(cuò)誤之類的問題，導(dǎo)致背大鍋。

到此這篇關(guān)于JavaScript解決浮點(diǎn)數(shù)運(yùn)算精度丟失問題的幾種方案的文章就介紹到這了,更多相關(guān)JavaScript浮點(diǎn)數(shù)運(yùn)算精度丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論