前端JS運算精度丟失的解決方法
更新時間：2025年03月18日 10:57:39 作者：the_flash
前端在處理小數(shù)或大整數(shù)時,由于 JavaScript 的 Number 類型使用 IEEE 754 雙精度浮點數(shù)表示,可能會出現(xiàn)精度丟失問題（如 0.1 + 0.2 = 0.30000000000000004）,以下是常見的解決方案,需要的朋友可以參考下
一、核心解決方法
1. 轉(zhuǎn)換為整數(shù)計算（推薦）
將小數(shù)轉(zhuǎn)換為整數(shù)運算，再轉(zhuǎn)換回小數(shù)：
// 動態(tài)計算倍數(shù)，避免手動指定精度
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. 使用高精度庫
引入第三方數(shù)學(xué)庫處理復(fù)雜運算：
- decimal.js（推薦）
import Decimal from "decimal.js"; const result = new Decimal(0.1).plus(0.2).toNumber(); // 0.3
- big.js（輕量級）
import Big from "big.js"; const result = new Big(0.1).plus(0.2).toNumber(); // 0.3
3. 字符串處理法
將數(shù)值轉(zhuǎn)為字符串手動計算（適合簡單場景）：
function addStrings(a, b) {
// 實現(xiàn)字符串相加邏輯（需處理小數(shù)點對齊）
// ...
}
addStrings("0.1", "0.2"); // "0.3"
4. 使用 BigInt 處理大整數(shù)
對超出 Number 安全范圍（±2^53）的整數(shù)：
const bigIntResult = BigInt("9007199254740993") + BigInt("1"); // 9007199254740994n
二、輔助技巧
1. 結(jié)果比較容錯
使用極小值 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. 后端計算
復(fù)雜場景（如金融系統(tǒng)）交由后端處理：
// 前端傳遞參數(shù)，后端返回精確結(jié)果（例如使用 Java BigDecimal）
三、方案對比
| 方法 | 適用場景 | 優(yōu)點 | 缺點 |
|---|---|---|---|
| 整數(shù)轉(zhuǎn)換 | 簡單小數(shù)運算 | 無需依賴庫，性能高 | 需手動處理倍數(shù)，復(fù)雜運算繁瑣 |
| 高精度庫（decimal.js） | 復(fù)雜計算（如財務(wù)、科學(xué)） | 高精度，API 豐富 | 增加包體積 |
| 字符串處理 | 超大數(shù)據(jù)或特定格式 | 完全避免浮點數(shù)問題 | 實現(xiàn)復(fù)雜，性能低 |
| BigInt | 大整數(shù)運算 | 原生支持，無精度丟失 | 不支持小數(shù) |
| 后端計算 | 高安全要求場景 | 避免前端計算風(fēng)險 | 依賴網(wǎng)絡(luò)請求 |
四、實踐建議
- 通用場景：優(yōu)先使用
decimal.js或big.js。 - 性能敏感：用整數(shù)轉(zhuǎn)換法，但需注意溢出問題。
- 金融場景：金額以分為單位存儲（如
1元 = 100分），避免小數(shù)。 - 數(shù)據(jù)展示：用
toFixed()或Intl.NumberFormat控制顯示精度。
以上就是前端JS運算精度丟失的解決方法的詳細內(nèi)容，更多關(guān)于JS運算精度丟失的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js 使用ajax設(shè)置和獲取自定義header信息的方法小結(jié)
這篇文章主要介紹了js 使用ajax設(shè)置和獲取自定義header信息的方法,結(jié)合實例形式總結(jié)分析了js 使用ajax自定義設(shè)置和獲取header響應(yīng)信息相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下2020-03-03
詳解JavaScript實現(xiàn)動態(tài)的輪播圖效果
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)的輪播圖效果，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Javascript加速運動與減速運動代碼分享,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了URL中“#” “？” &“”號的作用淺析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02![JavaScript 應(yīng)用技巧集合[推薦]](http://img.jbzj.com/images/xgimg/bcimg4.png)
前段時間我曾經(jīng)對JavaScript中的應(yīng)用技巧進行了收集和總結(jié)這里我將會對這些應(yīng)用技巧進行集中描述，如果你覺得遺漏了一些好用的應(yīng)用技巧，也請在留言中提出，我會及時更新到這篇文章中的。2009-08-08
有時候我們需要檢查一個頁面上是否用重復(fù)的id，一般id都是唯一的，也方便控制，那么就可以參考下面的代碼2013-07-07
下面小編就為大家分享一篇利用JavaScript的%做隔行換色的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-11-11
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__
跟我學(xué)習(xí)javascript的prototype,getPrototypeOf和__proto__，深入學(xué)習(xí)了三個用來訪問prototype的方法，感興趣的小伙伴們可以參考一下2015-11-11
相對于ES5,ES6的對象字面量得到了很大程度的增強，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之對象字面量的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
這篇文章主要介紹了JavaScript空值合并運算符??的相關(guān)資料,??是一個js邏輯操作符,當(dāng)左側(cè)的操作數(shù)為null或者undefined時,返回其右側(cè)數(shù),否則返回左側(cè)數(shù),文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-09-09