欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript解決浮點數(shù)運算精度丟失問題的幾種方案

 更新時間：2025年06月10日 09:37:23   作者：飛天貓貓頭  
在開發(fā)項目的過程中,我們難免會遇到數(shù)值計算的場景,此時,我們通常會遇到數(shù)值計算結果和我們的預期不一致的情況,通常發(fā)生這種情況的原因都是因為JavaScript精度丟失的問題,所以本文給大家介紹了JavaScript解決浮點數(shù)運算精度丟失問題的幾種方案

場景復現(xiàn)

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

上面的這些數(shù)值相加的結果應該是21566.3

但是在瀏覽器中運算的時候，結果卻變成了21566.300000000003

那么為什么會這樣呢？

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

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

總之， 前端計算存在這么一個問題。

幾種解決方案對比

轉化為整數(shù)計算

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ù)量計算，大數(shù)還是不行

用toFixed()格式化

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

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

字符串模擬運算

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

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

第三方庫

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

這些第三方庫都可以解決這個問題

bignumber.js的使用

這邊我以這個庫為例來解決這個問題，這個庫的解決原理就是前面提到的字符串模擬運算。

安裝

用包管理器安裝

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())

結果如下：

相減

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

結果如下:

相乘

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

結果如下：

相除

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

結果如下：

判斷是否相等和比較大小

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))

結果如下：

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

結尾

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

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

相關文章

最新評論