前端JavaScript处理小数精度问题的最佳实践教程

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

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

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

npm install big.js -S

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

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

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

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

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

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

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

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

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

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