JS大數(shù)值處理和金額格式化處理的幾種方案
在做前端開發(fā)或者使用 n8n、dify 等工具時可能會跟數(shù)字打交道，可能會遇到下面這些需求：
- 顯示金額：
1234567.89 → 1,234,567.89 - 金額計算：
0.1 + 0.2 - 超大 ID：
9007199254740993 - 阿拉伯數(shù)字轉(zhuǎn)中文金額：
123456.78 → 壹拾貳萬叁仟肆佰伍拾陸元柒角捌分
很多剛接觸 JavaScript 的開發(fā)者會直接使用 Number 類型處理這些問題，但實際上這里面隱藏了不少 坑。
舉個例子：
如果后端傳給你的 JSON 里的長 ID 沒加引號，前端在 JSON.parse 的一瞬間就已經(jīng)把精度丟了。
const rawJson = '{"id": 9007199254740995}';
const parsed = JSON.parse(rawJson);
console.log(parsed.id.toString()); // "9007199254740996" 精度丟失了！?。?
解決方案：
- 后端改 String：最省心的辦法。讓后端把超長 ID 以字符串形式下發(fā)。
- 前端插件：如果后端不改，你可以使用
json-bigint庫來解析原始的 JSON 字符串。
數(shù)值是否安全？
在實際應(yīng)用中，可以通過一些方法來胖段當前數(shù)值是否安全。
JS 提供的方法：
Number.isSafeInteger(9007199254740991) // true Number.isSafeInteger(9007199254740992) // false
處理大數(shù)值的幾種方案
在 JavaScript 里，普通數(shù)字類型是 Number（64位雙精度浮點），它有一個安全整數(shù)范圍：
- 最大安全整數(shù)：
Number.MAX_SAFE_INTEGER= 9007199254740991 - 最小安全整數(shù)：
Number.MIN_SAFE_INTEGER= -9007199254740991
超過這個范圍就會出現(xiàn) 精度丟失問題，例如：
console.log(9007199254740991 + 1) // 9007199254740992 console.log(9007199254740991 + 2) // 9007199254740992 ? 精度丟失
如果你要處理 超過 Number 最大安全值的整數(shù)，有幾種常見方案??
方案1：BigInt
現(xiàn)代 JavaScript 提供了一種新的類型：BigInt。
它可以表示任意大的整數(shù)。
const num = BigInt("9007199254740993")
console.log(num + 1n)
// 9007199254740994n
用 BigInt 的話，數(shù)字后面會跟著一個字母 n，看到它就能區(qū)分這個值和普通的 Number 類型不一樣，這個需求可能會涉及很大的數(shù)值。
它還有一種簡寫方法，在賦值的時候不需要加引號括者數(shù)字，而是在數(shù)字后面加個 n。
const num = 9007199254740993n
需要注意的是，BigInt 不能和 Number 混合運算?。。?/p>
1n + 1 // ? 報錯
必須統(tǒng)一類型：
1n + BigInt(1)
金融計算為什么不能直接用 Number
一個經(jīng)典問題：
0.1 + 0.2 # 結(jié)果是 0.30000000000000004
原因是浮點數(shù)精度問題。
金融系統(tǒng)一般有兩種解決方案。
方案一：金額用“分”存儲
例如：
123.45 元 存儲為：12345 分
前端展示時再除以 100。
const amount = 12345 / 100 console.log(amount) // 123.45
這種方式是比較老派的方法。
方案二：使用大數(shù)庫
**MikeMcl 寫了幾個很出名的處理數(shù)字的JS庫，比如：
- bignumber.js：https://github.com/MikeMcl/bignumber.js
- decimal.js：https://github.com/MikeMcl/decimal.js
- big.js：https://github.com/MikeMcl/big.js
我用 bignumber.js 演示一下。
安裝 bignumber.js
npm install bignumber.js
在前端項目里引入：
import BigNumber from 'bignumber.js';
此時直接計算小數(shù)位的數(shù)值
const a = new BigNumber(0.1) const b = new BigNumber(0.2) a.plus(b).toString() // 0.3 // 格式化，保留2位小數(shù) a.plus(b).toFormat(2) // 0.30
處理數(shù)值比較大的數(shù)據(jù)也沒問題
// 1. 創(chuàng)建大數(shù)（建議始終傳入字符串）
const x = new BigNumber('9007199254740995.123456789');
const y = new BigNumber('100');
// 2. 加減乘除
const res = x.plus(y); // 加
const res2 = x.minus(y); // 減
const res3 = x.times(y); // 乘
const res4 = x.div(y); // 除
console.log(res.toString()); // "9007199254741095.123456789" (精度完全保留)
格式化數(shù)值
在金融行業(yè)，金額的展示不僅關(guān)乎美觀，更關(guān)乎準確性和合規(guī)性。針對你提出的千分位轉(zhuǎn)換、中文大寫轉(zhuǎn)換以及大數(shù)處理
千分位格式化
方案1：toLocaleString()
JavaScript 原生支持國際化格式化。
const amount = 123456789.56 amount.toLocaleString() // 123,456,789.56
方案2：Intl.NumberFormat
金融項目比較推薦使用這個方案。
const formatter = new Intl.NumberFormat('zh-CN', {
minimumFractionDigits: 2,
maximumFractionDigits: 2
})
console.log(formatter.format(1234567.8))
// 1,234,567.80
如果想在金額前面加一個“錢”的符號，比如人民幣就加個 ¥，可以這么寫：
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'currency',
currency: 'CNY'
})
console.log(formatter.format(123456))
// ￥123,456.00
如果要使用美元符 $ 就這么寫：
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
})
console.log(formatter.format(123456))
// $123,456.00
方案3：正則實現(xiàn)千分位（不推薦）
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
console.log(formatNumber(123456789))
// 123,456,789
如果需要支持小數(shù)就這么寫：
function formatMoney(num) {
return num.toString().replace(/\d+/, function(n) {
return n.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
})
}
但金融系統(tǒng)一般不推薦這種方式，因為這種方式不支持國際化，不支持貨幣格式，容易出 bug。
數(shù)字轉(zhuǎn)大寫中文
在中文的金融系統(tǒng)中，經(jīng)常需要展示：
123456.78 ↓ 壹拾貳萬叁仟肆佰伍拾陸元柒角捌分
這個規(guī)則有點復雜，一般不建議自己實現(xiàn)。
我推薦使用開源庫 nzh（github.com/cnwhy/nzh）。
安裝：
npm install nzh
使用：
import nzh from "nzh" nzh.cn.encodeS(123456) // 十二萬三千四百五十六 nzh.cn.encodeB(123456.78) // 壹拾貳萬叁仟肆佰伍拾陸點柒捌 nzh.cn.toMoney(123456.78) // 人民幣壹拾貳萬叁仟肆佰伍拾陸元柒角捌分
最后總結(jié)一下。
在 JavaScript 中處理金額和大數(shù)時，核心要記住三點：
1?? 不要直接用 Number 做金融計算 2?? 金額存儲最好使用整數(shù)（分） 3?? 展示時再進行格式化
只要遵循這三條原則，就可以避免絕大多數(shù)金額相關(guān)的 bug。
以上就是JS大數(shù)值處理和金額格式化處理的幾種方案的詳細內(nèi)容，更多關(guān)于JS大數(shù)值處理和金額格式化的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本文主要給大家介紹的是javascript中的擴展方法字符串trim()的使用指南，十分的簡單實用，有需要的小伙伴可以參考下。2015-05-05
script標簽中的async和defer詳細說明與使用場景
這篇文章主要介紹了script標簽中的async和defer詳細說明與使用場景,需要的朋友可以參考下2023-02-02
JavaScript中最容易混淆的作用域、提升、閉包知識詳解(推薦)
在web前端開發(fā)中js中的作用域，提升，閉包知識是經(jīng)常用到的也是很容易混淆的知識點，接下來小編整理了本教程幫助大家學習2016-09-09
js中document.referrer實現(xiàn)移動端返回上一頁
本文主要介紹了document.referrer實現(xiàn)移動端返回上一頁的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細介紹了JavaScript封裝彈框插件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【五】Bootstrap File Input文件上傳插件的用法
本文主要基于我自己的框架代碼案例，介紹其中文件上傳插件File Input的使用，非常具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
Umi4已于今年6月份發(fā)布,同時支持?Vite?和?Webpack?兩種構(gòu)建方式,對詬病已久的mufs做了優(yōu)化,另外還支持vue,這篇文章主要介紹了umi4.js基本使用方法的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-09-09
JS對img進行操作包括:換圖片/切圖/輪換/停止輪換等等，在本文將逐一實現(xiàn)，感興趣的朋友可以參考下哈，希望對你學習js知識有所幫助2013-04-04
uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序,下面這篇文章主要給大家介紹了關(guān)于如何利用uni-app開發(fā)App的相關(guān)資料,需要的朋友可以參考下2022-11-11
使用formatter函數(shù)設(shè)置Echarts的tooltip中動態(tài)單位
這篇文章主要為大家介紹了使用formatter函數(shù)設(shè)置Echarts的tooltip中動態(tài)單位實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07