big.js快速上手指南(最全最詳細)
更新時間：2025年07月26日 11:23:44 作者：全棧前端老曹
big.js是一個用于任意精度十進制算術的小型、快速的JavaScript庫,它適用于所有瀏覽器,并且支持ECMAScript 3,這篇文章主要介紹了big.js快速上手指南的相關資料,需要的朋友可以參考下
一、概念與歷史發(fā)展
1. 概念
big.js 是一個輕量級的 JavaScript 庫，用于處理 高精度浮點數運算。它解決了 JavaScript 原生浮點數精度丟失的問題，適用于金融計算、科學計算等對精度要求極高的場景。
?? JS 浮點數問題示例：
0.1 + 0.2; // 0.30000000000000004 ? 精度錯誤
使用 big.js 后：
new Big(0.1).plus(0.2).toString(); // '0.3' ? 精確結果
2. 歷史發(fā)展
- 2014 年：由 MikeMcl 開發(fā)并開源，最初名為
BigNumber.js - 2018 年：更名為
big.js，成為 GitHub 上最受歡迎的高精度數字庫之一 - 特點：小巧（壓縮后 < 5KB）、無依賴、兼容性好（支持 IE9+）
- 適用領域：電商價格計算、銀行利息結算、區(qū)塊鏈交易、數據分析等
二、安裝與引入方式
1. 安裝（Node.js 環(huán)境）
npm install big.js
// 引入
const Big = require('big.js');
2. 瀏覽器中直接使用
<script src="https://cdn.jsdelivr.net/npm/big.js@6.2.1/big.min.js"></script>
const result = new Big(123.456);
三、基本語法與 API
1. 創(chuàng)建 Big 實例
new Big(n: number | string | Big): Big
| 參數類型 | 示例 | 說明 |
|---|---|---|
| 數字 | new Big(123.45) | 推薦使用字符串避免精度丟失 |
| 字符串 | new Big('123.45') | 最推薦方式，確保精確解析 |
| Big 對象 | new Big(new Big(123)) | 克隆 |
?? 不建議傳入復雜表達式或函數，應先轉換為字符串或數字。
2. 常用方法一覽
| 方法名 | 功能 | 示例 |
|---|---|---|
.plus(n) | 加法 | new Big(0.1).plus(0.2) |
.minus(n) | 減法 | new Big(1.2).minus(0.7) |
.times(n) | 乘法 | new Big(1.2).times(3) |
.div(n[, dp]) | 除法（可指定小數位） | new Big(1).div(3, 2) |
.mod(n) | 取模 | new Big(10).mod(3) |
.pow(exp) | 冪運算 | new Big(2).pow(10) |
.round(dp, rm) | 四舍五入 | new Big(3.14159).round(2) |
.cmp(n) | 比較 | new Big(5).cmp(3) |
.eq(n) | 是否相等 | new Big(5).eq(5) |
.lt(n) / .lte(n) | 小于 / 小于等于 | new Big(2).lt(3) |
.gt(n) / .gte(n) | 大于 / 大于等于 | new Big(5).gt(3) |
.toNumber() | 轉換為原生 Number | new Big(123).toNumber() |
.toString() | 輸出字符串 | new Big(123.456).toString() |
.toFixed(dp) | 格式化固定小數位 | new Big(3.14159).toFixed(2) |
四、配置項（全局設置）
你可以通過 Big.DP 和 Big.RM 設置默認行為：
Big.DP = 20; // 默認保留 20 位小數 Big.RM = 1; // 舍入模式（0:四舍五入, 1:向下取整, 2:向上取整, 3:去尾法）
五、所有使用場景詳解
場景 1：金融計算（加減乘除）
const amount1 = new Big('19.99');
const amount2 = new Big('5.49');
const total = amount1.plus(amount2); // '25.48'
console.log(total.toFixed(2)); // '25.48'
場景 2：貨幣匯率換算
// 導入Big.js庫
import Big from 'big.js';
// 定義美元金額
const usd = new Big('100');
// 定義匯率（1美元兌換7.25人民幣）
const rate = new Big('7.25'); // USD to CNY
// 計算等值人民幣金額
const cny = usd.times(rate); // 結果將是'725.00'
// 輸出結果，保留兩位小數
console.log(cny.toFixed(2)); // 輸出: '725.00'
場景 3：商品總價計算（帶數量）
const price = new Big('29.99');
const quantity = 3;
const totalPrice = price.times(quantity); // '89.97'
console.log(totalPrice.toString());
場景 4：大額資金比較（安全風控）
const balance = new Big('1000000.00');
const withdrawal = new Big('999999.99');
if (withdrawal.lte(balance)) {
console.log('可以提現(xiàn)');
} else {
console.log('余額不足');
}
場景 5：科學計算（冪運算）
// 導入Big.js庫
import Big from 'big.js';
// 定義基數
const base = new Big('2');
// 定義指數
const exponent = 64;
// 計算冪運算結果
const result = base.pow(exponent); // 結果將是18446744073709551616
// 輸出結果
console.log(result.toString()); // 輸出: '18446744073709551616'
場景 6：區(qū)塊鏈交易金額校驗
// 導入Big.js庫
import Big from 'big.js';
// 定義要轉賬的金額
const transferAmount = new Big('0.000000123456');
// 定義最小轉賬金額限制
const minTransfer = new Big('0.0000001');
// 檢查轉賬金額是否滿足最低要求
if (transferAmount.gte(minTransfer)) {
console.log('交易有效');
} else {
console.log('交易金額過低');
}
場景 7：數據統(tǒng)計分析（平均值）
// 導入Big.js庫
import Big from 'big.js';
// 定義數字數組
const values = ['12.34', '45.67', '89.01'];
// 使用reduce方法計算數組中所有數字的總和
// 初始值為new Big(0)，然后對每個元素使用plus方法進行累加
const sum = values.reduce((acc, val) => acc.plus(val), new Big(0));
// 計算平均值
const avg = sum.div(values.length);
// 輸出結果
console.log(`總和：${sum}`); // 輸出: '147.02'
console.log(`平均值：${avg}`); // 輸出: '49.00666666666666666666'
六、注意事項與最佳實踐
?? 風險點
| 風險 | 描述 |
|---|---|
| ? 不要混用 Big 與原生 Number 運算 | 如 new Big(1) + 1 會出錯 |
| ? 不要將對象或函數傳入構造函數 | 必須是數字或字符串 |
| ? 不要頻繁創(chuàng)建 Big 實例 | 在循環(huán)或高頻調用中注意性能優(yōu)化 |
? 不要忘記 .toString() 或 .toFixed() 輸出 | 否則返回的是 Big 對象引用 |
? 最佳實踐
| 實踐 | 說明 |
|---|---|
| ? 總是使用字符串初始化 | 避免浮點精度問題 |
? 使用 .toFixed(n) 控制輸出格式 | 特別是在 UI 顯示時 |
? 使用 .eq(), .lt(), .gt() 替代 ===, <, > | 避免類型強制轉換錯誤 |
? 使用 Big.DP 設置默認精度 | 統(tǒng)一項目中的計算規(guī)則 |
? 使用 .round(dp, rm) 控制舍入 | 提高財務一致性 |
| ? 封裝成工具類 | 提高復用性和可維護性 |
七、高級技巧與封裝建議
1. 封裝成通用計算函數
// 導入Big.js庫，用于高精度數學運算
import Big from 'big.js';
/**
* 執(zhí)行基本數學運算的函數
* @param op 運算類型：'add'(加法), 'sub'(減法), 'mul'(乘法), 'div'(除法)
* @param a 第一個操作數（字符串形式）
* @param b 第二個操作數（字符串形式）
* @returns 運算結果，保留兩位小數的字符串
*/
function calc(op: 'add' | 'sub' | 'mul' | 'div', a: string, b: string): string {
// 將字符串參數轉換為Big.js對象，以便進行高精度計算
const x = new Big(a);
const y = new Big(b);
// 根據操作符執(zhí)行相應的數學運算
switch (op) {
case 'add':
// 執(zhí)行加法運算，并將結果格式化為保留兩位小數的字符串
return x.plus(y).toFixed(2);
case 'sub':
// 執(zhí)行減法運算，并將結果格式化為保留兩位小數的字符串
return x.minus(y).toFixed(2);
case 'mul':
// 執(zhí)行乘法運算，并將結果格式化為保留兩位小數的字符串
return x.times(y).toFixed(2);
case 'div':
// 執(zhí)行除法運算，并將結果格式化為保留兩位小數的字符串
return x.div(y).toFixed(2);
}
}
// 測試函數
console.log(calc('add', '10.01', '20.02')); // 輸出: '30.03'
2. 與 Vue/React 結合使用（如你的項目）
在 Vue 中，可在 methods或 utils.js 中封裝：
// utils.js
import Big from 'big.js';
export function formatMoney(value: string | number): string {
return new Big(value).toFixed(2);
}
<template>
<div>總價：{{ formatMoney(total) }}</div>
</template>
<script>
import { formatMoney } from '@/utils';
export default {
data() {
return {
total: '123.456'
};
},
methods: {
formatMoney
}
};
</script>
八、常見錯誤與解決方案
| 錯誤 | 原因 | 解決方案 |
|---|---|---|
NaN 錯誤 | 傳入非法字符 | 使用前驗證輸入 |
Invalid Big value | 構造參數無效 | 確保是字符串或數字 |
Uncaught TypeError: Cannot convert instance of Big to primitive | 直接使用 + 運算符 | 改用 .plus() 方法 |
Exponential notation not supported | 輸入含 e 科學計數法 | 先轉為標準數字格式 |
九、總結與面試題
| big.js 要點 | 內容 |
|---|---|
| ? 主要用途 | 高精度浮點數運算 |
| ? 優(yōu)勢 | 輕量、安全、跨平臺 |
| ? 推薦使用場景 | 金融、支付、區(qū)塊鏈、科學計算 |
| ? 注意事項 | 不要混用原生數字，控制精度 |
| ? 替代方案 | decimal.js（更強大但更大） |
big.js面試題精選（10大高頻面試題）
1.為什么在 JavaScript 中需要使用 big.js 進行浮點數運算？
參考答案：
JavaScript 使用 IEEE 754 浮點數標準，導致某些小數運算存在精度丟失問題。例如：
0.1 + 0.2; // 0.30000000000000004 ?
big.js 提供了高精度的十進制運算能力，避免此類誤差，適用于金融、支付等對精度要求極高的場景。
使用 big.js 示例：
new Big(0.1).plus(0.2).toString(); // '0.3' ?
2.如何創(chuàng)建一個 Big 對象？有哪些推薦方式？
參考答案：
可以通過以下方式創(chuàng)建：
new Big(123); // 數字
new Big('123.45'); // 推薦：字符串（避免精度丟失）
new Big(new Big(123)); // Big 實例克隆
推薦方式是字符串初始化，因為直接傳入浮點數可能會因 JS 原生解析而引入誤差。
3.big.js 支持哪些基本運算方法？請舉例說明。
參考答案：
| 方法 | 功能 | 示例 |
|---|---|---|
.plus(n) | 加法 | new Big(0.1).plus(0.2) |
.minus(n) | 減法 | new Big(1.2).minus(0.7) |
.times(n) | 乘法 | new Big(1.2).times(3) |
.div(n[, dp]) | 除法（可指定小數位） | new Big(1).div(3, 2) |
示例：
const result = new Big('10').div('3', 2); // '3.33'
4.如何比較兩個 Big 實例的大小？能否用<或>？
參考答案：
不能直接使用 < 或 >，應使用如下方法：
a.eq(b); // 是否相等 a.lt(b); // a < b a.gt(b); // a > b a.lte(b); // a <= b a.gte(b); // a >= b
正確寫法：
const a = new Big('5');
const b = new Big('3');
console.log(a.gt(b)); // true
5.big.js 如何控制輸出的小數位數和舍入方式？
參考答案：
可以使用 .toFixed(dp) 和 .round(dp, rm) 控制格式化輸出和舍入方式。
const num = new Big('3.14159');
num.toFixed(2); // '3.14'
num.round(3); // '3.142'
// 設置全局默認行為
Big.DP = 20; // 默認保留 20 位小數
Big.RM = 1; // 舍入模式（0:四舍五入, 1:向下取整, 2:向上取整, 3:去尾法）
6.big.js 的舍入模式有哪些？分別代表什么含義？
參考答案：
Big.RM 支持以下舍入模式（共 4 種）：
| 模式值 | 含義 |
|---|---|
0 | 四舍五入（默認） |
1 | 向下取整（截斷） |
2 | 向上取整 |
3 | 去尾法（不常用） |
示例：
Big.RM = 1;
new Big('3.999').round(0); // '3'
7.big.js 和 decimal.js 有什么區(qū)別？你如何選擇？
參考答案：
| 特性 | big.js | decimal.js |
|---|---|---|
| 體積 | 更?。▔嚎s后 < 5KB） | 較大 |
| 功能 | 精簡實用 | 更強大（支持指數、三角函數等） |
| 性能 | 更快 | 略慢 |
| 使用難度 | 簡單易用 | 配置更復雜 |
| 適用場景 | 金融計算、基礎數學 | 科學計算、復雜業(yè)務邏輯 |
選擇建議：
- 如果只需要加減乘除、比較、格式化，選
big.js - 如果需要高級數學運算或更高定制化，選
decimal.js
8.big.js 是否可以用于 Vue/React 等前端框架中？如何封裝？
參考答案：
是的，big.js 可以用于任何前端框架中，推薦封裝成工具類或自定義 Hook / Filter。
Vue 封裝示例：
// utils/bigUtils.ts
import Big from 'big.js';
export function formatMoney(value: string | number): string {
return new Big(value).toFixed(2);
}
<template>
<div>價格：{{ formatMoney(price) }}</div>
</template>
<script>
import { formatMoney } from '@/utils/bigUtils';
export default {
data() {
return {
price: '19.99'
};
},
methods: {
formatMoney
}
};
</script>
9.big.js 在進行大量循環(huán)計算時性能如何？是否需要注意優(yōu)化？
參考答案：
雖然 big.js 性能較好，但在高頻循環(huán)或大數據處理中仍需注意：
- 頻繁創(chuàng)建 Big 實例會帶來額外開銷；
- 避免在渲染層直接做復雜計算，應在數據處理階段完成；
- 可緩存中間結果，減少重復創(chuàng)建；
- 若性能成為瓶頸，考慮使用 Web Worker 異步處理。
示例優(yōu)化：
let total = new Big(0);
for (let i = 0; i < items.length; i++) {
total = total.plus(items[i].price);
}
10.big.js 如何處理非法輸入？如何防止運行時錯誤？
參考答案：
big.js 構造函數若傳入非法參數會拋出異常，因此必須進行輸入校驗：
function safeParse(input) {
try {
return new Big(input);
} catch (e) {
console.error('無效數值:', input);
return new Big(0);
}
}
safeParse('abc'); // 輸出 0，并提示錯誤
推薦做法：
- 輸入前驗證類型或格式；
- 使用 try-catch 包裹構造過程；
- 對用戶輸入進行防抖/節(jié)流處理；
- 結合表單驗證庫（如 Vuelidate）提前攔截非法輸入；
總結
| 題號 | 主題 |
|---|---|
| 1 | JS 浮點數精度問題與 big.js 的作用 |
| 2 | Big 實例的創(chuàng)建方式與最佳實踐 |
| 3 | 常見運算方法及其使用方式 |
| 4 | 比較操作符的替代方法 |
| 5 | 格式化輸出與舍入設置 |
| 6 | big.js 與 decimal.js 的對比 |
| 7 | 框架集成與工具封裝 |
| 8 | 性能優(yōu)化技巧 |
| 9 | 錯誤處理與輸入驗證 |
| 10 | 安全構建實例的方法 |
十、結語
如果你正在開發(fā)一個 Vue/React 商業(yè)系統(tǒng)，強烈建議你在涉及金額、匯率、折扣、庫存等關鍵業(yè)務邏輯中使用 big.js 來保障計算精度和數據準確性。
老曹建議將 big.js 工具函數統(tǒng)一放在 /utils/financial.js 中，并在需要的地方按需引入。
到此這篇關于big.js快速上手的文章就介紹到這了,更多相關big.js上手指南內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Javascript 完美運動框架(逐行分析代碼，讓你輕松了運動的原理)
這篇文章主要介紹了Javascript 完美運動框架,逐行分析代碼，讓你輕松了運動的原理,需要的朋友可以參考下2015-01-01
手把手教你做超酷的條形碼效果...2007-04-04
本文主要介紹了原生js獲取瀏覽器窗口及元素寬高常用方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
下面小編就為大家?guī)硪黄獪\談JavaScript的全局變量與局部變量。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
微信小程序實現(xiàn)地區(qū)選擇偽五級聯(lián)動
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)地區(qū)選擇偽五級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
layui屬于輕量級框架,簡單美化.是用于開發(fā)后端模式,它在服務端頁面上有非常好的效果，這篇文章主要介紹了layUI布局使用教程,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了js中關于base64編碼的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了es6函數name屬性,結合實例形式分析了es6函數name屬性基本原理、功能、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了JS頁面獲取 session 值，作用域和閉包,結合具體實例形式分析了javascript與jsp交互獲取session值、函數作用域及閉包相關操作技巧,需要的朋友可以參考下2019-10-10
動態(tài)創(chuàng)建按鈕的JavaScript代碼
本文給大家分享一段JS實例代碼介紹動態(tài)創(chuàng)建按鈕的方法，需要的朋友參考下本文2016-01-01