前端JS小数精度解决方案：原生封装与big.js库实战指南

前言：

针对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.30000000000000004
handleDecimalPrecision(0.1 + 0.2) //0.3

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

方法二：

推荐使用第三方库big.js。该方案适用于对精度要求较高、小数计算频繁的项目，能够从长期角度彻底解决浮点数精度丢失问题。下文将展示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.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官网文档

总结

到此这篇关于前端JavaScript处理小数精度问题的文章就介绍到这了,更多相关前端JS处理小数精度内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

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

前言：