前端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)文章
基于Particles.js制作超炫粒子動態(tài)背景效果(仿知乎)
本文給大家分享Particles.js基于Canvas畫布創(chuàng)建粒子顆粒效果，代碼非常簡單，需要的朋友參考下吧2017-09-09
詳解js對象中屬性的兩種類型之?dāng)?shù)據(jù)屬性和訪問器屬性
在理解vue底層響應(yīng)式原理時，了解到，原來對象中的屬性，不單單從表面看起來那么簡單是key:value形式，而是還有隱藏的內(nèi)部特性，其中對象內(nèi)的屬性分為兩種類型的屬性：數(shù)據(jù)屬性和訪問器屬性，本文將給大家詳細介紹一下數(shù)據(jù)屬性和訪問器屬性,需要的朋友可以參考下2023-05-05
在網(wǎng)頁設(shè)計和開發(fā)中,圖片局部放大鏡交互功能是一個常見的需求,它可以增強用戶體驗,讓用戶更仔細地查看圖片的細節(jié),本文將介紹如何使用JavaScript來實現(xiàn)這一功能,以及提供代碼示例和詳細解釋,需要的朋友可以參考下2023-10-10
下面小編就為大家?guī)硪黄猨avaScript中的原型解析【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
查找字符的情況下會使用replace()方法，此方法很常見也很實用，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所把幫助2013-10-10
本文講的是函數(shù)閉包，不涉及對象閉包（如用with實現(xiàn)）。如果你覺得我說的有偏差，歡迎拍磚，歡迎指教。2010-07-07
本文給大家分享JavaScript中的E-mail 地址格式驗證，項目要求輸入的數(shù)據(jù)必須包含@符號和點號。代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03![javascript charAt() arr[i]數(shù)組實例代碼](http://img.jbzj.com/images/xgimg/bcimg7.png)
javascript charAt() arr[i]數(shù)組實例代碼
實例區(qū)別一下charAt()和arr[i].toString()的使用方法2008-08-08
這篇文章主要為大家詳細介紹了原生js實現(xiàn)3D輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家詳細介紹了微信小程序使用視頻播放器video組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04