前端JavaScript处理小数精度问题（最佳实践）

前言：

针对于小数精度问题，本次我们主要推荐两种方式，一种是简单的函数封装，一种使用第三方库。

方法一：

自封装函数搭配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版本更快、更小、更易于使用
• 复制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>

效果图：

创建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）的字符串

bigjs官网文档