大小仅 1KB!超级好用!计算无敌!

js 原生的数字计算是一个令人头痛的问题,最常见的就是浮点数精度丢失

js 复制代码
// 1. 加减运算
0.1 + 0.2 // 结果:0.30000000000000004(预期 0.3)
0.7 - 0.1 // 结果:0.6000000000000001(预期 0.6)

// 2. 乘法精度偏移
0.1 * 0.2 // 结果:0.020000000000000004(预期 0.02)
3 * 0.3   // 结果:0.8999999999999999(预期 0.9)

// 3. 除法结果异常
0.3 / 0.; // 结果:2.9999999999999996(预期 3)
1.2 / 0.2 // 结果:5.999999999999999(预期 6)

在金额计算的场景中出现这种问题是很危险的,例如「0.1 元 + 0.2 元」本应等于 0.3 元,原生计算却会得出 0.30000000000000004 元,直接导致金额显示错误或支付逻辑异常。

不少人会用toFixed四舍五入,保留 2 位小数来格式化数字,它本质上是 字符串格式化工具,而非精度修复工具 ,而且还会带来新的精度问题 ------ toFixed的四舍五入规则是 "银行家舍入法",无法解决底层计算的精度误差。

js 复制代码
// 问题1. 四舍五入规则不符合预期
1.005.toFixed(2); // 结果:"1.00"(预期 "1.01")
2.005.toFixed(2); // 结果:"2.00"(同样问题)
1.235.toFixed(2); // 结果:"1.23"(预期 "1.24")

// 问题2. 无法修复底层计算误差
const sum = 0.1 + 0.2; // 0.30000000000000004
sum.toFixed(2); // 结果:"0.30"(表面正确,但误差仍存在,后续再运算仍然有问题)
sum.toFixed(10); // 结果:"0.3000000000"(仅隐藏误差,未消除)

number-precision 能解决这些问题。

number-precision 的优势在哪?

  • 轻量化,大小仅 1kb
  • API 极简化,只有加减乘除四舍五入
  • 专注精度问题,无额外心智负担
  • 兼容性好,无额外依赖

适用场景

  • 中小型项目、仅需解决基础加减乘除精度问题的场景(如电商、金融类简单计算)
  • 对包体积敏感的前端项目。

如何使用?

bash 复制代码
pnpm install number-precision
js 复制代码
import NP from 'number-precision'

NP.strip(0.09999999999999998); // = 0.1
NP.plus(0.1, 0.2);             //加法计算 = 0.3, not 0.30000000000000004
NP.plus(2.3, 2.4);             //加法计算 = 4.7, not 4.699999999999999
NP.minus(1.0, 0.9);            //减法计算 = 0.1, not 0.09999999999999998
NP.times(3, 0.3);              //乘法计算 = 0.9, not 0.8999999999999999
NP.times(0.362, 100);          //乘法法计算 = 36.2, not 36.199999999999996
NP.divide(1.21, 1.1);          //除法计算 = 1.1, not 1.0999999999999999
NP.round(0.105, 2);            //四舍五入,保留2位小数 = 0.11, not 0.1

混合的计算:

js 复制代码
import NP from 'number-precision'

// (0.8-0.5)x1000,保留2位小数
NP.round(NP.times(NP.minus(0.8, 0.5), 1000), 2)
// 计算股票收益率
NP.round(NP.times(NP.divide(NP.minus(+price, +cost), +cost), 100),2)

更复杂的计算场景用什么

number-precision有短小精悍的优势在,基本的运算都能拿捏,但那些要求更高的计算场景用什么库呢?

总结了目前社区流行的几款计算库,大家按需取用。

特点场景 库体积 优势 劣势 适用场景
toFixed 内置方法,仅用于数字格式化,不解决底层精度问题 0 无需额外引入,使用便捷 无法修复计算误差,四舍五入规则非标准 非精确场景的临时格式化
number-precision 轻量化,提供加减乘除、四舍五入基础功能,无多余 1KB 体积极小,API 极简,学习成本低 不支持超大整数,无复杂数学运算 电商价格计算、表单数字校验
big.js 专注十进制浮点数运算,API 简洁,默认精度可配置 6KB 平衡体积与功能,兼容性好 功能少于 decimal.js 中小型项目精确计算、数据统计
decimal.js 功能全面,支持高精度控制、大数字处理、进制转换、三角函数等,可自定义精度配置 32KB 精度极高,功能覆盖全,灵活性强 体积较大,API 较复杂 金融核心计算、科学计算
math.js 全能型数学库,支持表达式解析、矩阵运算、单位转换等复杂数学能力 160KB 综合数学能力强,场景覆盖广 体积庞大,性能开销高 数据可视化、工程计算

附上地址:

number-precisiongithub.com/nefe/number...

big.jsgithub.com/MikeMcl/big...

decimal.jsgithub.com/MikeMcl/dec...

math.jsgithub.com/josdejong/m...

相关推荐
ttod_qzstudio4 分钟前
Vue 3 Props 定义详解:从基础到进阶
前端·vue.js
钱端工程师4 分钟前
uniapp封装uni.request请求,实现重复接口请求中断上次请求(防抖)
前端·javascript·uni-app
茶憶5 分钟前
uni-app app移动端实现纵向滑块功能,并伴随自动播放
javascript·vue.js·uni-app·html·scss
dcloud_jibinbin7 分钟前
【uniapp】解决小程序分包下的json文件编译后生成到主包的问题
前端·性能优化·微信小程序·uni-app·vue·json
茶憶10 分钟前
uniapp移动端实现触摸滑动功能:上下滑动展开收起内容,左右滑动删除列表
前端·javascript·vue.js·uni-app
Ayn慢慢13 分钟前
uni-app PDA焦点录入实现
前端·javascript·uni-app
一位搞嵌入式的 genius23 分钟前
微前端架构:JavaScript 隔离方案全解析(含 CSS 隔离)概要
前端·css·前端实战
4_0_424 分钟前
一步一步实现 Shader 水波纹效果(入门到进阶)
前端·three.js
lemonboy24 分钟前
可视化大屏适配方案:用 Tailwind CSS 直接写设计稿像素值
前端·vue.js
鹏仔工作室25 分钟前
vue中实现1小时不操作则退出登录功能
前端·javascript·vue.js