JavaScript中的精度丟失與分?jǐn)偛黄絾栴}原因及解決方案
大家好！這是很多前端（尤其是金融、電商、支付、報(bào)表）開發(fā)者最頭疼的問題：
console.log(0.1 + 0.2); // 0.30000000000000004 console.log(0.3 - 0.2); // 0.09999999999999998 console.log(19.9 * 100); // 1989.9999999999998 console.log(1.005.toFixed(2)); // "1.00" 而不是 "1.01"
更可怕的是分?jǐn)偛黄剑ń痤~拆分時(shí)總和對(duì)不上）：
假設(shè) 100 元分給 3 個(gè)人，每人應(yīng)得 33.333… 元
用 toFixed(2) 后：33.33 + 33.33 + 33.33 = 99.99（差1分！）
今天這篇保姆級(jí)+生產(chǎn)級(jí)文章，一次性徹底講透原因 + 所有解決方案（從簡單到企業(yè)級(jí)），看完你再也不會(huì)被精度坑了。
1. 根本原因：IEEE 754 雙精度浮點(diǎn)數(shù)（必懂！）
JavaScript 的 Number 類型底層是 64位 IEEE 754 雙精度浮點(diǎn)數(shù)：
- 1位符號(hào) + 11位指數(shù) + 52位尾數(shù)（有效精度約15-16位十進(jìn)制）
- 二進(jìn)制無法精確表示大部分十進(jìn)制小數(shù)（就像十進(jìn)制無法精確表示1/3）
經(jīng)典二進(jìn)制轉(zhuǎn)換演示（0.1 的二進(jìn)制是無限循環(huán)）：
大整數(shù)精度丟失（超過 Number.MAX_SAFE_INTEGER = 9007199254740991）：
console.log(9007199254740992 === 9007199254740993); // true！已丟失
2. 常見場景 & 問題匯總
| 場景 | 典型表現(xiàn) | 后果 |
|---|---|---|
| 加減乘除小數(shù) | 0.1+0.2、0.3-0.2 | 顯示多位小數(shù)或不相等 |
| toFixed() | 1.005.toFixed(2) → “1.00” | 銀行級(jí)四舍五入錯(cuò)誤 |
| 大ID（雪花算法） | JSON.parse后后幾位變0 | ID重復(fù)、數(shù)據(jù)錯(cuò)亂 |
| 金額分?jǐn)?/td> | 100 / 3 = 33.333… → toFixed后總和少1分 | 分?jǐn)偛黄?/strong>（最致命） |
| 循環(huán)累加 | 0.1 加 10 次 ≠ 1 | 報(bào)表總計(jì)對(duì)不上 |
3. 解決方案對(duì)比（2026推薦排序）
方案1：最簡單——轉(zhuǎn)為整數(shù)計(jì)算（推薦日常金額）
把元轉(zhuǎn)為分（或更小單位），全部用整數(shù)運(yùn)算，最后再除。
// 金額用分存儲(chǔ) const price = 1999; // 19.99元 const qty = 3; const total = price * qty; // 5997 分 console.log((total / 100).toFixed(2)); // "59.97" 完美
分?jǐn)偛黄浇K極解決（銀行家舍入 + 尾差調(diào)整）：
function distribute(amount, parts) {
const base = Math.floor(amount / parts);
const remainder = amount % parts;
const result = new Array(parts).fill(base);
for (let i = 0; i < remainder; i++) result[i]++;
return result.map(v => v / 100); // 轉(zhuǎn)回元
}
distribute(10000, 3); // [3334, 3333, 3333] 分 → 總和正好100.00元
方案2：原生 BigInt（整數(shù)超大數(shù)專用，2026最推薦）
const a = 9007199254740992n; const b = 1n; console.log(a + b); // 9007199254740993n 精確！
金額場景（推薦結(jié)合方案1）：
const priceInFen = 1999n; const total = priceInFen * 3n; // 5997n console.log(Number(total) / 100); // 59.97
方案3：高精度庫（金融/科學(xué)計(jì)算必備）
2026年主流庫對(duì)比（生產(chǎn)驗(yàn)證）：
推薦優(yōu)先級(jí)：
- decimal.js（最推薦）—— 任意精度、API最友好
- bignumber.js —— 輕量、速度快
- big.js —— 極簡
- Dinero.js / currency.js —— 專門做貨幣
decimal.js 實(shí)戰(zhàn)代碼（復(fù)制即用）：
import Decimal from 'decimal.js';
Decimal.set({ precision: 20, rounding: Decimal.ROUND_HALF_EVEN });
const a = new Decimal('0.1');
const b = new Decimal('0.2');
console.log(a.plus(b).toString()); // "0.3" 完美
const total = new Decimal('100');
const perPerson = total.dividedBy(3).toFixed(2); // "33.33"
console.log(perPerson); // 不會(huì)分?jǐn)偛黄?/pre>toFixed 增強(qiáng)版（解決1.005問題）：
function accurateToFixed(num, digits = 2) {
return new Decimal(num).toFixed(digits);
}
accurateToFixed(1.005); // "1.01"
方案4：其他輔助技巧
- JSON大數(shù)：用
json-bigint或BigInt序列化 - 比較時(shí)用
Number.EPSILON：Math.abs(a - b) < Number.EPSILON - 顯示時(shí)永遠(yuǎn)用
.toFixed(2)+ 庫
4. 生產(chǎn)最佳實(shí)踐（強(qiáng)烈建議）
- 所有金額后端存“分”或字符串，前端用
Decimal或整數(shù) - 前端計(jì)算全部走庫，絕不用原生
+ - * / - 分?jǐn)倛鼍?/strong>必須用整數(shù)分?jǐn)?+ 尾差調(diào)整算法
- 大ID一律用
BigInt或字符串 - 測試：寫單元測試覆蓋
0.1+0.2、1.005.toFixed、100/3
5. 小結(jié) & 推薦工具
一句話記住：
永遠(yuǎn)不要相信 JS 原生 Number 做精確計(jì)算，尤其是錢！
立即行動(dòng)：
- 金額類項(xiàng)目 → 安裝
decimal.js+ 改成整數(shù)分存儲(chǔ) - 大數(shù)ID → 用
BigInt或json-bigint - 快速修復(fù) → 先用
toFixed(2)+Number.EPSILON兜底
以上就是JavaScript中的精度丟失與分?jǐn)偛黄絾栴}原因及解決方案的詳細(xì)內(nèi)容，更多關(guān)于JavaScript精度丟失與分?jǐn)偛黄降馁Y料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家?guī)硪黄猄tring字符串截取的四種方式總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JavaScript實(shí)現(xiàn)移動(dòng)端短信驗(yàn)證碼流程介紹
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動(dòng)端發(fā)送短信驗(yàn)證碼案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-10-10
完美實(shí)現(xiàn)js焦點(diǎn)輪播效果(二)（圖片可滾動(dòng)）
這篇文章主要為大家詳細(xì)介紹了完美實(shí)現(xiàn)js焦點(diǎn)輪播效果的相關(guān)代碼，采用輔助圖片實(shí)現(xiàn)圖片無限滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法的具體區(qū)別詳
在JavaScript中數(shù)組是一種非常常見且功能強(qiáng)大的數(shù)據(jù)結(jié)構(gòu),這篇文章主要介紹了JavaScript中find()、findIndex()、filter()、indexOf()處理數(shù)組方法具體區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
這篇文章主要介紹了Ajax與服務(wù)器（JSON）通信實(shí)例代碼的相關(guān)資料,并附實(shí)例代碼，幫助大家學(xué)習(xí)理解此部分知識(shí)，需要的朋友可以參考下2016-11-11
對(duì)于經(jīng)常用js的朋友，有時(shí)候一段腳本并不是兩個(gè)瀏覽器都兼容的，下面一些對(duì)ie和firefox都兼容的一些代碼，大家可以學(xué)習(xí)下。2008-10-10
這篇文章主要介紹了通過a標(biāo)簽的超鏈接提交form表單方法匯總，十分的全面細(xì)致，也很實(shí)用，有需要的小伙伴可以參考下。2015-06-06
用JavaScript實(shí)現(xiàn)UrlEncode和UrlDecode的腳本代碼
用js自定義函數(shù)寫的實(shí)現(xiàn)url加密解密的實(shí)現(xiàn)代碼，需要的朋友可以參考下2008-07-07
JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)獲取URL中參數(shù)值的4種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2025-02-02
這篇文章主要介紹了詳解從0開始搭建微信小程序(前后端)的全過程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04