前言：

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

方法一：

自封装函数搭配parseFloat和toFixed解决小数精度问题，仅适用于解决一般性小数精度问题，适用于项目中小数问题比较少的项目。 

<code> /**

* @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">code>

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

效果图：

<code>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运算符说明

bigjs官网文档