快捷導(dǎo)航

前端JavaScript處理小數(shù)精度問(wèn)題的最佳實(shí)踐教程

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

在JavaScript開(kāi)發(fā)過(guò)程中,小數(shù)精度問(wèn)題是一個(gè)常見(jiàn)的難題,本文介紹了兩種解決小數(shù)精度問(wèn)題的方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言：

針對(duì)于小數(shù)精度問(wèn)題，本次我們主要推薦兩種方式，一種是簡(jiǎn)單的函數(shù)封裝，一種是使用第三方庫(kù)big.js。

方法一：

自封裝函數(shù)搭配parseFloat和toFixed解決小數(shù)精度問(wèn)題，僅適用于解決一般性小數(shù)精度問(wèn)題，適用于項(xiàng)目中小數(shù)問(wèn)題比較少的項(xiàng)目。

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

測(cè)試用例：

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

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

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

方法二：

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

big.js特點(diǎn)

簡(jiǎn)單的API
比Java的BigDecimal更快、更小、更易于使用
復(fù)制JavaScript數(shù)字的toExponential、toFixed和toPrecision方法
可以訪(fǎng)問(wèn)的十進(jìn)制浮點(diǎn)格式存儲(chǔ)值
全面的文檔和測(cè)試集
沒(méi)有依賴(lài)關(guān)系，相對(duì)獨(dú)立
僅使用ECMAScript 3，無(wú)兼容性問(wèn)題

安裝big.js

npm install big.js -S

引入big.js

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

示例（以vue為例）：

code:

<template>
  <div class="app-container">
    <div>小數(shù)精度</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數(shù)據(jù)

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

加法精度問(wèn)題處理 - 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

減法精度問(wèn)題 - minus

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

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

乘法精度問(wèn)題 - times

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

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

除法精度問(wèn)題 - div

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

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

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

big.js運(yùn)算符說(shuō)明

運(yùn)算符	說(shuō)明
abs	取絕對(duì)值
cmp	compare的縮寫(xiě)，即比較函數(shù)
div	除法
eq	equal的縮寫(xiě)，即相等比較
gt	大于
gte	小于等于，e表示equal
lt	小于
lte	小于等于，e表示equal
minus	減法
mod	取余
plus	加法
pow	次方
prec	按精度舍入，參數(shù)表示整體位數(shù)
round	按精度舍入，參數(shù)表示小數(shù)點(diǎn)后位數(shù)
sqrt	開(kāi)方
times	乘法
toExponential	轉(zhuǎn)化為科學(xué)計(jì)數(shù)法，參數(shù)代表精度位數(shù)
toFied	補(bǔ)全位數(shù)，參數(shù)代表小數(shù)點(diǎn)后位數(shù)
toJSON/toString	轉(zhuǎn)化為字符串
toPrecision	按指定有效位數(shù)展示，參數(shù)為有效位數(shù)
toNumber	轉(zhuǎn)化為JavaScript中number類(lèi)型
valueOf	包含負(fù)號(hào)（如果為負(fù)數(shù)或者-0）的字符串