前端JS運(yùn)算精度丟失的解決方法
更新時(shí)間：2025年03月18日 10:57:39 作者：the_flash
前端在處理小數(shù)或大整數(shù)時(shí),由于 JavaScript 的 Number 類型使用 IEEE 754 雙精度浮點(diǎn)數(shù)表示,可能會(huì)出現(xiàn)精度丟失問題（如 0.1 + 0.2 = 0.30000000000000004）,以下是常見的解決方案,需要的朋友可以參考下
一、核心解決方法
1. 轉(zhuǎn)換為整數(shù)計(jì)算（推薦）
將小數(shù)轉(zhuǎn)換為整數(shù)運(yùn)算，再轉(zhuǎn)換回小數(shù)：
// 動(dòng)態(tài)計(jì)算倍數(shù)，避免手動(dòng)指定精度
function toInt(num) {
const str = num.toString();
const decimalPlaces = str.split('.')[1]?.length || 0;
return { scaled: num * 10 ** decimalPlaces, factor: 10 ** decimalPlaces };
}
const { scaled: a, factor } = toInt(0.1);
const { scaled: b } = toInt(0.2);
const result = (a + b) / factor; // 0.3
2. 使用高精度庫(kù)
引入第三方數(shù)學(xué)庫(kù)處理復(fù)雜運(yùn)算：
- decimal.js（推薦）
import Decimal from "decimal.js"; const result = new Decimal(0.1).plus(0.2).toNumber(); // 0.3
- big.js（輕量級(jí)）
import Big from "big.js"; const result = new Big(0.1).plus(0.2).toNumber(); // 0.3
3. 字符串處理法
將數(shù)值轉(zhuǎn)為字符串手動(dòng)計(jì)算（適合簡(jiǎn)單場(chǎng)景）：
function addStrings(a, b) {
// 實(shí)現(xiàn)字符串相加邏輯（需處理小數(shù)點(diǎn)對(duì)齊）
// ...
}
addStrings("0.1", "0.2"); // "0.3"
4. 使用 BigInt 處理大整數(shù)
對(duì)超出 Number 安全范圍（±2^53）的整數(shù)：
const bigIntResult = BigInt("9007199254740993") + BigInt("1"); // 9007199254740994n
二、輔助技巧
1. 結(jié)果比較容錯(cuò)
使用極小值 Number.EPSILON 容忍誤差：
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true
2. 限制小數(shù)位數(shù)
用 toFixed() 格式化（注意返回字符串）：
(0.1 + 0.2).toFixed(2); // "0.30"（可能四舍五入）
3. 后端計(jì)算
復(fù)雜場(chǎng)景（如金融系統(tǒng)）交由后端處理：
// 前端傳遞參數(shù)，后端返回精確結(jié)果（例如使用 Java BigDecimal）
三、方案對(duì)比
| 方法 | 適用場(chǎng)景 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|---|
| 整數(shù)轉(zhuǎn)換 | 簡(jiǎn)單小數(shù)運(yùn)算 | 無需依賴庫(kù)，性能高 | 需手動(dòng)處理倍數(shù)，復(fù)雜運(yùn)算繁瑣 |
| 高精度庫(kù)（decimal.js） | 復(fù)雜計(jì)算（如財(cái)務(wù)、科學(xué)） | 高精度，API 豐富 | 增加包體積 |
| 字符串處理 | 超大數(shù)據(jù)或特定格式 | 完全避免浮點(diǎn)數(shù)問題 | 實(shí)現(xiàn)復(fù)雜，性能低 |
| BigInt | 大整數(shù)運(yùn)算 | 原生支持，無精度丟失 | 不支持小數(shù) |
| 后端計(jì)算 | 高安全要求場(chǎng)景 | 避免前端計(jì)算風(fēng)險(xiǎn) | 依賴網(wǎng)絡(luò)請(qǐng)求 |
四、實(shí)踐建議
- 通用場(chǎng)景：優(yōu)先使用
decimal.js或big.js。 - 性能敏感：用整數(shù)轉(zhuǎn)換法，但需注意溢出問題。
- 金融場(chǎng)景：金額以分為單位存儲(chǔ)（如
1元 = 100分），避免小數(shù)。 - 數(shù)據(jù)展示：用
toFixed()或Intl.NumberFormat控制顯示精度。
以上就是前端JS運(yùn)算精度丟失的解決方法的詳細(xì)內(nèi)容，更多關(guān)于JS運(yùn)算精度丟失的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于Particles.js制作超炫粒子動(dòng)態(tài)背景效果(仿知乎)
本文給大家分享Particles.js基于Canvas畫布創(chuàng)建粒子顆粒效果，代碼非常簡(jiǎn)單，需要的朋友參考下吧2017-09-09
詳解js對(duì)象中屬性的兩種類型之?dāng)?shù)據(jù)屬性和訪問器屬性
在理解vue底層響應(yīng)式原理時(shí)，了解到，原來對(duì)象中的屬性，不單單從表面看起來那么簡(jiǎn)單是key:value形式，而是還有隱藏的內(nèi)部特性，其中對(duì)象內(nèi)的屬性分為兩種類型的屬性：數(shù)據(jù)屬性和訪問器屬性，本文將給大家詳細(xì)介紹一下數(shù)據(jù)屬性和訪問器屬性,需要的朋友可以參考下2023-05-05
JavaScript實(shí)現(xiàn)圖片局部放大鏡交互功能
在網(wǎng)頁(yè)設(shè)計(jì)和開發(fā)中,圖片局部放大鏡交互功能是一個(gè)常見的需求,它可以增強(qiáng)用戶體驗(yàn),讓用戶更仔細(xì)地查看圖片的細(xì)節(jié),本文將介紹如何使用JavaScript來實(shí)現(xiàn)這一功能,以及提供代碼示例和詳細(xì)解釋,需要的朋友可以參考下2023-10-10
下面小編就為大家?guī)硪黄猨avaScript中的原型解析【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
查找字符的情況下會(huì)使用replace()方法，此方法很常見也很實(shí)用，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下，希望對(duì)大家有所把幫助2013-10-10
本文講的是函數(shù)閉包，不涉及對(duì)象閉包（如用with實(shí)現(xiàn)）。如果你覺得我說的有偏差，歡迎拍磚，歡迎指教。2010-07-07
JavaScript中的E-mail 地址格式驗(yàn)證
本文給大家分享JavaScript中的E-mail 地址格式驗(yàn)證，項(xiàng)目要求輸入的數(shù)據(jù)必須包含@符號(hào)和點(diǎn)號(hào)。代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03![javascript charAt() arr[i]數(shù)組實(shí)例代碼](http://img.jbzj.com/images/xgimg/bcimg7.png)
javascript charAt() arr[i]數(shù)組實(shí)例代碼
實(shí)例區(qū)別一下charAt()和arr[i].toString()的使用方法2008-08-08
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)3D輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序使用視頻播放器video組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04