前端JavaScript處理小數精度問題的最佳實踐教程

更新時間：2024年10月22日 08:29:30 作者：零凌林

在JavaScript開發(fā)過程中,小數精度問題是一個常見的難題,本文介紹了兩種解決小數精度問題的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言：

針對于小數精度問題，本次我們主要推薦兩種方式，一種是簡單的函數封裝，一種是使用第三方庫big.js。

方法一：

自封裝函數搭配parseFloat和toFixed解決小數精度問題，僅適用于解決一般性小數精度問題，適用于項目中小數問題比較少的項目。

  /**
  * @description: 處理小數精度
  * @param {*} value 需要格式化的數字
  * @param {*} fixedNum 保留的小數位數，默認為2
  * @param {*} multiple 乘數，默認為1
  * @return {*} 
  */
  export const handleDecimalPrecision = (value, fixedNum = 2, multiple = 1) => {
    return parseFloat((value * multiple).toFixed(fixedNum))
  }

測試用例：

（傳倍數multiple 是為了展示成百分比，比如30%）

0.1 + 0.2 //0.30000000000000004
handleDecimalPrecision(0.1 + 0.2) //0.3

handleDecimalPrecision(0.1 + 0.2,1,100) //30 傳倍數multiple 是為了展示成百分比，比如30%

方法二：

使用第三方庫big.js 。適用于精度問題比較多的項目，長期性解決精度問題。以下我們將展示一些常見的使用范圍的場景，其他的深冷需求可移步至官方文檔查看。

big.js特點

簡單的API
比Java的BigDecimal更快、更小、更易于使用
復制JavaScript數字的toExponential、toFixed和toPrecision方法
可以訪問的十進制浮點格式存儲值
全面的文檔和測試集
沒有依賴關系，相對獨立
僅使用ECMAScript 3，無兼容性問題

安裝big.js

npm install big.js -S

引入big.js

<script>
import Big from 'big.js'
</script>

示例（以vue為例）：

code:

<template>
  <div class="app-container">
    <div>小數精度</div>
    <div>未處理 : 0.1 + 0.2 = {{sum_orgin}}</div>
    <div>bigjs處理 : 0.1 + 0.2 = {{sum_bigjs}}</div>
  </div>
</template>

<script setup>
import Big from 'big.js'

const num1 = 0.1
const num2 = 0.2
const sum_orgin = num1.value + num2.value
const sum_bigjs = Big(num1.value).plus(Big(num2.value))
</script>

效果圖：

創(chuàng)建Big number數據

const num1 = Big(0.1)
或者
const num2 = new Big(0.2)

加法精度問題處理 - plus

0.1 + 0.2 //0.30000000000000004
0.7 + 0.1 //0.7999999999999999
0.2 + 0.4 //0.6000000000000001

Big(0.1).plus(Big(0.2)) //0.3
Big(0.1).plus(Big(0.24)) //0.34

減法精度問題 - minus

0.3 - 0.2 //0.09999999999999998
1.5 - 1.2 //0.30000000000000004

Big(0.3).minus(Big(0.2)) //0.1

乘法精度問題 - times

19.9 * 100 //1989.9999999999998
0.8 * 3 //2.4000000000000004
35.41 * 100 //3540.9999999999995

Big(19.9).times(Big(100)) //1990

除法精度問題 - div

0.3 / 0.1 //2.9999999999999996
0.69 / 10 //0.06899999999999999
Big(0.3).div(Big(0.1)) //3

保留小數位數(四舍五入) - round

1 / 3 //0.3333333333333333
Big(1).div(Big(3)).round(3) //0.333

big.js運算符說明

運算符	說明
abs	取絕對值
cmp	compare的縮寫，即比較函數
div	除法
eq	equal的縮寫，即相等比較
gt	大于
gte	小于等于，e表示equal
lt	小于
lte	小于等于，e表示equal
minus	減法
mod	取余
plus	加法
pow	次方
prec	按精度舍入，參數表示整體位數
round	按精度舍入，參數表示小數點后位數
sqrt	開方
times	乘法
toExponential	轉化為科學計數法，參數代表精度位數
toFied	補全位數，參數代表小數點后位數
toJSON/toString	轉化為字符串
toPrecision	按指定有效位數展示，參數為有效位數
toNumber	轉化為JavaScript中number類型
valueOf	包含負號（如果為負數或者-0）的字符串