前端如何应对精确数字运算？用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性
目录
前端如何应对精确数字运算？用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性
作者：watermelo37
ZEEKLOG万粉博主、华为云云享专家、阿里云专家博主、腾讯云、支付宝合作作者，全平台博客昵称watermelo37。
一个假装是giser的coder，做不只专注于业务逻辑的前端工程师，Java、Docker、Python、LLM均有涉猎。
---------------------------------------------------------------------
温柔地对待温柔的人，包容的三观就是最大的温柔。
---------------------------------------------------------------------
前端如何应对精确数字运算？用BigNumber.js解决JavaScript原生Number类型在处理大数或高精度计算时的局限性
一、BigNumber.js介绍
1、什么是 BigNumber.js？
BigNumber.js 是一个 JavaScript 库，用于处理高精度的数字运算。它解决了 JavaScript 原生 Number 类型在处理大数或高精度计算时的局限性。由于 JavaScript 的 Number 类型基于 IEEE 754 标准（双精度浮点数），其精度限制为 53 位有效数字，因此在处理大数或需要高精度的场景下容易出现精度丢失的问题。
BigNumber.js专注于十进制精度运算，内部使用字符串进行十进制模拟，完全避免了 JS 的二进制浮点误差。默认不会丢失精度，也不会四舍五入除非你手动指定。在很多真实应用场景中（如金融、金额、电商）至关重要。
// 精度计算问题 console.log(0.1+0.2); // 0.30000000000000004 // 大数比较问题，超过2^53 - 1 = 9007199254740991的数字会丢失精度 console.log(15615616981519815 === 15615616981519816)2、作用领域
BigNumber.js 的主要作用领域包括但不限于以下场景：
- 金融计算：贷款利息计算、汇率转换、交易金额处理等。
- 科学计算：天文学中的距离计算、化学中的分子量计算等。
- 区块链与加密货币：比特币、以太坊等加密货币的交易金额等。
- 数据统计与分析：统计报表、数据分析工具等。
- 其他高精度需求场景：游戏开发中的经济系统（虚拟货币）、电子商务中的价格计算等。
3、核心特性
BigNumber.js 的核心特性使其成为处理高精度数字的理想选择：能支持任意精度；每次操作都会返回一个新的BigNumber对象，不修改原始对象；支持丰富的数学运算；支持多种格式化输出方式；配置灵活且跨平台兼容。
二、安装配置与基础用法
1、引入 BigNumber.js
通过npm安装：
npm install bignumber.js然后在代码中引入：
const BigNumber = require('bignumber.js'); // 或者（ES6 模块语法） import BigNumber from 'bignumber.js';如果不想使用 npm，可以直接通过 CDN 在 HTML 文件中引入：
<script src="https://cdn.jsdelivr.net/npm/bignumber.js/bignumber.min.js"></script> <script> // 使用全局变量 BigNumber const num = new BigNumber('123456789.123456789'); console.log(num.toString()); </script>2、配置 BigNumber.js
BigNumber.js 提供了全局配置选项，可以设置默认精度、舍入模式等。这些配置对所有 BigNumber 实例生效。
BigNumber.config({ DECIMAL_PLACES: 10, // 设置小数点后保留位数 ROUNDING_MODE: BigNumber.ROUND_HALF_UP, // 四舍五入 EXPONENTIAL_AT: [-15, 20], // 设置科学计数法的触发范围 });- DECIMAL_PLACES：控制小数点后的保留位数。
- ROUNDING_MODE：定义舍入模式，支持以下选项：
- BigNumber.ROUND_UP：向上取整。
- BigNumber.ROUND_DOWN：向下取整。
- BigNumber.ROUND_HALF_UP：四舍五入。
- BigNumber.ROUND_HALF_DOWN：五舍六入。
- EXPONENTIAL_AT ：设置科学计数法的触发范围。例如，[-15, 20] 表示当数字小于 1e-15 或大于 1e20 时，会自动转换为科学计数法。
你也可以在创建 BigNumber 实例时用局部配置代替全局配置：
const num = new BigNumber('1.23456789', { DECIMAL_PLACES: 5 }); console.log(num.toString()); // 输出：1.234573、常用方法
以下是一些常用的 BigNumber.js 方法及其用途：
①创建 BigNumber 实例
const num = new BigNumber('123456789.123456789'); console.log(num.toString()); // 输出：123456789.123456789②基本运算
BigNumber.js 支持加法、减法、乘法、除法、取模等操作。
const a = new BigNumber('10'); const b = new BigNumber('3'); console.log(a.plus(b).toString()); // 加法：13 console.log(a.minus(b).toString()); // 减法：7 console.log(a.times(b).toString()); // 乘法：30 console.log(a.div(b).toString()); // 除法：3.3333333333333333333 console.log(a.mod(b).toString()); // 取模：1③幂运算
const num = new BigNumber('2'); console.log(num.pow(10).toString()); // 幂运算：1024④绝对值
const num = new BigNumber('-123.45'); console.log(num.abs().toString()); // 绝对值：123.45⑤舍入
const num = new BigNumber('1.23456789'); console.log(num.toFixed(2, BigNumber.ROUND_UP)); // 向上取整：1.24 console.log(num.toFixed(2, BigNumber.ROUND_DOWN)); // 向下取整：1.23 console.log(num.toFixed(2, BigNumber.ROUND_HALF_UP)); // 四舍五入：1.23⑥比较
const a = new BigNumber('10'); const b = new BigNumber('20'); console.log(a.comparedTo(b)); // 比较：-1（a < b） console.log(a.isEqualTo(b)); // 判断是否相等：false console.log(a.isGreaterThan(b)); // 判断是否大于：false console.log(a.isLessThan(b)); // 判断是否小于：true⑦格式化输出
const num = new BigNumber('123456789.123456789'); console.log(num.toString()); // 默认格式：123456789.123456789 console.log(num.toFormat(2)); // 格式化为两位小数：123,456,789.12 console.log(num.toExponential(2)); // 科学计数法：1.23e+8⑧链式调用
const result = new BigNumber('10') .plus('5') // 10 + 5 = 15 .times('2') // 15 * 2 = 30 .div('3') // 30 / 3 = 10 .pow('2'); // 10^2 = 100 console.log(result.toString()); // 输出：100三、核心特性
1、大数精度丢失问题
JavaScript 原生 Number 类型在处理非常大的数字或小数时会出现精度丢失，而 BigNumber.js 能确保任意精度。
// 原生 JavaScript console.log(9007199254740992 === 9007199254740993); // 输出：true（错误） // 使用 BigNumber.js const BigNumber = require('bignumber.js'); const num1 = new BigNumber('9007199254740992'); const num2 = new BigNumber('9007199254740993'); console.log(num1.eq(num2)); // 输出：false（正确）2、小数运算精度问题
原生 JavaScript 在处理小数运算时可能会出现浮点数精度误差，而 BigNumber.js 能确保精确结果。
// 原生 JavaScript console.log(0.1 + 0.2); // 输出：0.30000000000000004（错误） // 使用 BigNumber.js const BigNumber = require('bignumber.js'); const num1 = new BigNumber('0.1'); const num2 = new BigNumber('0.2'); console.log(num1.plus(num2).toString()); // 输出：0.3（正确）3、大数乘除法精度问题
原生 JavaScript 在处理大数乘/除法时可能会丢失精度，而 BigNumber.js 能确保精确结果。
// 原生 JavaScript const weiAmount = 1000000000000000001; // 1 ETH + 1 wei const ethAmount = weiAmount / 1000000000000000000; console.log(ethAmount); // 输出：1.0000000000000002（错误） // 使用 BigNumber.js const BigNumber = require('bignumber.js'); const weiAmount = new BigNumber('1000000000000000001'); // 1 ETH + 1 wei const ethAmount = weiAmount.div(new BigNumber('1000000000000000000')); console.log(ethAmount.toString()); // 输出：1.000000000000000001（正确）四、总结
BigNumber.js 是为了解决 JS 在处理“十进制小数”时精度丢失的问题而生的。相比之下，其他库要么功能更复杂（decimal.js）、要么精度控制不默认（math.js）、要么只处理整数（BigInt）。
只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
其他热门文章，请关注：
极致的灵活度满足工程美学：用Vue Flow绘制一个完美流程图
你真的会使用Vue3的onMounted钩子函数吗？Vue3中onMounted的用法详解
通过array.filter()实现数组的数据筛选、数据清洗和链式调用
通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能
TreeSize：免费的磁盘清理与管理神器，解决C盘爆满的燃眉之急
通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制
深入理解 JavaScript 中的 Array.find() 方法：原理、性能优势与实用案例详解
el-table实现动态数据的实时排序，一篇文章讲清楚elementui的表格排序功能
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver
JavaScript中通过array.map(）实现数据转换、创建派生数组、异步数据流处理、DOM操作等
前端实战：基于Vue3与免费满血版DeepSeek实现无限滚动+懒加载+瀑布流模块及优化策略
高效工作流：用Mermaid绘制你的专属流程图；如何在Vue3中导入mermaid绘制流程图
