在前端开发中，JavaScript 的原生 Number 类型在处理 高精度计算 或 大数字（如财务、加密货币） 时，常常会出现如下问题：
❌ 精度丢失、浮点误差、不支持无限大整数
这时候，我们可以使用 BigNumber.js 来精准地处理数学计算，避免精度陷阱。
🎯 为什么要用 BigNumber.js？
❗ JavaScript Number 的限制
0.1 + 0.2 === 0.3; // ❌ false
9999999999999999 + 1; // → 10000000000000000 （失真）
- JS 的
Number类型是 IEEE 754 双精度浮点数，最多安全表示 2^53-1。 - 计算机中 0.1 无法精确表示，因此
0.1 + 0.2 !== 0.3
✅ BigNumber.js 特性
- 精确的加减乘除运算
- 支持任意长度的整数/小数
- 支持链式调用
- 用于金融、电商、链上资产等精准计算场景
📦 安装 BigNumber.js
npm install bignumber.js
或使用 CDN：
<script src="https://cdn.jsdelivr.net/npm/bignumber.js"></script>
🧩 基础用法示例
import BigNumber from 'bignumber.js';
// 初始化
const a = new BigNumber(0.1);
const b = new BigNumber(0.2);
// 加法
console.log(a.plus(b).toString()); // ✅ "0.3"
// 减法
console.log(new BigNumber(1).minus(0.9).toString()); // ✅ "0.1"
// 乘法
console.log(new BigNumber(0.6).times(3).toString()); // ✅ "1.8"
// 除法
console.log(new BigNumber(1).dividedBy(3).toString()); // ✅ "0.3333333..."
🧠 精度控制 & 四舍五入
const a = new BigNumber(1).dividedBy(3);
// 保留两位小数，四舍五入
console.log(a.toFixed(2)); // "0.33"
// 保留三位小数，不足补0
console.log(a.toFormat(3)); // "0.333"
🔐 金融场景常用设置
BigNumber.config({
DECIMAL_PLACES: 10, // 默认保留小数位
ROUNDING_MODE: BigNumber.ROUND_HALF_UP // 四舍五入
});
🧪 对比示例：原生 vs BigNumber
| 操作 | JS 原生结果 | BigNumber |
|---|---|---|
0.1 + 0.2 | 0.30000000000000004 ❌ | "0.3" ✅ |
0.1 * 0.7 | 0.06999999999999999 ❌ | "0.07" ✅ |
9999999999999999 + 1 | 10000000000000000 ❌ | "10000000000000000" ✅ |
🌐 在 Vue / React 项目中的用法建议
// Vue3 中：script setup
<script setup lang="ts">
import BigNumber from 'bignumber.js';
const price = new BigNumber(0.1).plus(0.2).toFixed(2);
</script>
或封装成一个 useBigNumber 工具函数。
🧰 可替代方案对比
| 库名 | 特点 |
|---|---|
bignumber.js | ✅ 简单、轻量、适合前端 |
decimal.js | 精度更强，支持更复杂数学函数 |
BigInt（原生） | 仅支持整数，不支持小数 |
math.js | 包含矩阵、复数等高级数学功能 |
📌 实战建议
- 💰 金融、电商价格等场景 强烈推荐使用 BigNumber.js
- 🚫 不建议直接用
Number.toFixed()处理钱，仍有误差 - 🧪 用
.isEqualTo()判断等值，避免 JS 原生误判
new BigNumber(0.1).plus(0.2).isEqualTo(0.3); // ✅ true
✅ 总结一句话
如果你的项目涉及小数计算、价格、金额、精度要求较高，用 BigNumber.js 替代 JavaScript 原生 Number，是前端精度计算的标准做法。
发表回复