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

前言：

针对于小数精度问题，本次我们主要推荐两种方式，一种是简单的函数封装，一种是使用第三方库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.30000000000000004handleDecimalPrecision(0.1 + 0.2) //0.3handleDecimalPrecision(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.1const num2 = 0.2const sum_orgin = num1.value + num2.valueconst 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.300000000000000040.7 + 0.1 //0.79999999999999990.2 + 0.4 //0.6000000000000001Big(0.1).plus(Big(0.2)) //0.3Big(0.1).plus(Big(0.24)) //0.34

减法精度问题 - minus

0.3 - 0.2 //0.099999999999999981.5 - 1.2 //0.30000000000000004Big(0.3).minus(Big(0.2)) //0.1

乘法精度问题 - times

19.9 * 100 //1989.99999999999980.8 * 3 //2.400000000000000435.41 * 100 //3540.9999999999995Big(19.9).times(Big(100)) //1990

除法精度问题 - div

0.3 / 0.1 //2.99999999999999960.69 / 10 //0.06899999999999999Big(0.3).div(Big(0.1)) //3

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

1 / 3 //0.3333333333333333Big(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官网文档