記錄--前端金額運算精度丟失問題及解決方案

来源:https://www.cnblogs.com/smileZAZ/p/18001753
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言 前端開發中難免會遇到價格和金額計算的需求,這類需求所要計算的數值大多數情況下是要求精確到小數點後的多少位。但是因為JS語言本身的缺陷,在處理浮點數的運算時會出現一些奇怪的問題,導致計算不精確。 本文嘗試從現象入手,分析造成這一問題原 ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

前言

前端開發中難免會遇到價格和金額計算的需求,這類需求所要計算的數值大多數情況下是要求精確到小數點後的多少位。但是因為JS語言本身的缺陷,在處理浮點數的運算時會出現一些奇怪的問題,導致計算不精確。

本文嘗試從現象入手,分析造成這一問題原因,並總結和整合一些通用的解決方案,以供大家參考。

現象回顧

下麵的是JS進行數值運算過程中常見的問題,這個問題有個專業的名稱叫精度丟失

在 JavaScript 中整數和浮點數都屬於 Number 數據類型,所有的數字都是以 64 位浮點數形式存儲,整數也是如此。所以我們在列印 1.00 這樣的浮點數的結果是 1 而非 1.00 。在一些特殊的數值表示中,例如金額,這樣看上去有點彆扭,但是至少值是正確了。然而要命的是,當浮點數做數學運算的時候,你經常會發現一些問題,舉幾個例子:

// 加法
0.1 + 0.2 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.2 + 0.4 = 0.6000000000000001
2.22 + 0.1 = 2.3200000000000003

// 減法
1.5 - 1.2 = 0.30000000000000004
0.3 - 0.2 = 0.09999999999999998

// 乘法
19.9 * 100 = 1989.9999999999998
19.9 * 10 * 10 = 1990
1306377.64 * 100 = 130637763.99999999
1306377.64 * 10 * 10 = 130637763.99999999
0.7 * 180 = 125.99999999999999
9.7 * 100 = 969.9999999999999
39.7 * 100 = 3970.0000000000005

// 除法
0.3 / 0.1 = 2.9999999999999996
0.69 / 10 = 0.06899999999999999

問題分析

JavaScript 里的數字是採用 IEEE 754 標準的 64 位雙精度浮點數。

該規範定義了浮點數的格式,對於 64 位的浮點數在記憶體中的表示,最高的 1 位是符號位,接著的 11 位是指數,剩下的 52 位為有效數字,具體對應如下:

  • 第 0 位:符號位, s 表示 ,0 表示正數,1 表示負數;
  • 第 1 位到第 11 位:儲存指數部分, e 表示 ;
  • 第 12 位到第 63 位:儲存小數部分(即有效數字),f 表示,

符號位決定了一個數的正負,指數部分決定了數值的大小,小數部分決定了數值的精度。

IEEE 754 規定,有效數字第一位預設總是 1,不保存在 64 位浮點數之中。也就是說,有效數字總是 1.xx…xx 的形式,其中 xx..xx 的部分保存在 64 位浮點數之中,最長可能為 52 位。

因此,JavaScript 提供的有效數字最長為 53 個二進位位(64 位浮點的後 52 位 + 有效數字第一位的 1)。

那麼,JavaScript 在計算 0.1 + 0.2 時,到底發生了什麼呢?

首先,十進位的 0.10.2 都會被轉換成二進位,但由於浮點數用二進位表達時是無窮的,就成了下麵的樣子。

0.1 -> 0.0001100110011001...(無限)
0.2 -> 0.0011001100110011...(無限)
IEEE 754 標準的 64 位雙精度浮點數的小數部分最多支持 53 位二進位位,所以兩者相加之後得到的二進位就是下麵的樣子。
0.0100110011001100110011001100110011001100110011001100

最終,因浮點數小數位的限制而截斷的二進位數字,再轉換為十進位,就成了 0.30000000000000004,所以在進行算術計算時就產生了誤差。

解決方案

通常情況下對計算精度要求高的業務場景都應該交給後端去計算和存儲,因為後端有成熟的方案和工具來解決這種計算問題。

這裡是對網上常見的幾個解決方案的彙總和整理,但是方案一和方案二都存在一定的局限性,我會在對應的方案里進行說明。通常我們前端做這類運算通常只用於表現層,所以這兩個方案基本是夠用的。

方案一

在應對確定精度浮點數運算時,可以把金額轉換成整數進行運算,最後再將結果轉換成真實金額。

// 定義金額(保留兩位小數)
const amount1 = 0.10;
const amount2 = 0.20;

// 轉整數運算,並還原成真實金額
const result = ((amount1 * 100) + (amount2 * 100)) / 100;

// 結果
console.log(result); // 0.3

// 直接運算
console.log(amount1 + amount2); // 0.30000000000000004

需要註意的是上面的例子只能處理最多兩位小數的運算場景,如果小數位不確定這個方法是行不通的。

方案二

JavaScript 內置的 toFixed() 方法可以將數字轉換成保留指定小數位的字元串。這個方法適用於簡單的金額計算。但需要註意舍入誤差,因為轉換後是字元串,失去了浮點數的特性,最後的結果坑你存在微小的誤差。

// 定義金額
const amount1 = 0.1;
const amount2 = 0.2;

// 加法運算
const result = (amount1 + amount2).toFixed(2); // 保留兩位小數

// 註意這裡運算的結果應該是:0.30000000000000004
console.log(result); // 輸出 "0.30"

toFixed 它是一個四舍六入五成雙的詭異的方法(也叫銀行家演算法)。"四舍六入五成雙"含義:對於位數很多的近似數,當有效位數確定後,其後面多餘的數字應該捨去,只保留有效數字最末一位,這種修約(舍入)規則是“四舍六入五成雙”,也即“4舍6入5湊偶”這裡“四”是指≤4 時捨去,"六"是指≥6時進上,"五"指的是根據5後面的數字來定,當5後有數時,舍5入1;當5後無有效數字時,需要分兩種情況來講:5前為奇數,舍5入1;5前為偶數,舍5不進(0是偶數)。

第三方庫

現代前端發展至今,已經有很多成熟的類庫來幫助我們解決此類問題,這類類庫通常有很好的通用性和相容性。

下麵我將推薦幾個人氣較高的數字計算類庫。

Math.js

Math.js 是專門為 JavaScript 和 Node.js 提供的一個廣泛的數學庫。它具有靈活的表達式解析器,支持符號計算,配有大量內置函數和常量,並提供集成解決方案來處理不同的數據類型像數字,大數字 (超出安全數的數字),複數,分數,單位和矩陣,功能強大,易於使用。

官網:mathjs.org/

GitHub:GitHub - josdejong/mathjs: An extensive math library for JavaScript and Node.js

decimal.js

為 JavaScript 提供十進位類型的任意精度數值。

官網:decimal.js API

GitHub:GitHub - MikeMcl/decimal.js: An arbitrary-precision Decimal type for JavaScript

big.js

Big.js 是一個用於處理任意精度的大數運算的 JavaScript 庫。它解決了 JavaScript 中處理大數運算時精度丟失的問題,提供了更高精度的計算能力。

Big.js 庫的特點包括:

  • 任意精度:Big.js 允許您處理任意精度的數字,而不受 JavaScript 內置數字類型的限制。
  • 高精度計算:Big.js 提供了精確的加法、減法、乘法、除法和取餘等運算,以及比較和舍入等功能。
  • 可配置的精度和舍入規則:您可以自定義 Big.js 運算的精度和舍入規則,以滿足特定的需求。
  • 支持鏈式操作:您可以使用鏈式調用來執行多個運算,使代碼更簡潔易讀。
  • 適用於瀏覽器和 Node.js:Big.js 可以在瀏覽器和 Node.js 環境中使用,相容性良好。

Big.js 庫非常適用於需要高精度計算的場景,如金融、密碼學、科學計算和大數據處理等。它允許開發人員在 JavaScript 中進行準確的數字計算,避免了精度損失帶來的問題。

官網:big.js API

GitHub:GitHub - MikeMcl/big.js: A small, fast JavaScript library for arbitrary-precision decimal arithmetic.

總結

本文對 Javascript 中浮點數運算出現的精度丟失問題進行了還原,分析了問題產生的原因在於二進位本身。同時給出了三個網路上比較成熟的解決方案,其中第一和第二方案基本可以滿足大部分開發場景,如果不能滿足就使用類庫。

本文轉載於:

https://juejin.cn/post/7325627704782307337

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 聽我說 從 條件渲染 那一篇,我學習到瞭如何用Vue對dom節點根據條件顯示 但單單有條件還不夠啊,有時候數據是一大坨一大坨的數據,如果Vue不提供咱要麼使用“v-html” 要麼就沒辦法實現 v-html又感覺太low了,Vue提供了另外的指令更好的實現,那便是:列表渲染 列表渲染:v-for 簡 ...
  • 與其說是年終總結,更像是一場回顧,看看這一年 Fantastic-admin 都做了哪些與眾不同的功能,也給大家提供一些創造思路。 ...
  • 回顧 大致掌握了上一節的 插值語法 我已經可以把想要的數據顯示到頁面上,並且僅需要修改變數,頁面就會跟著實時改變 但如果對於已經熟悉前端的人來說,單單有數據還是不太行,還需要css對數據進行樣式的修飾,讓頁面更加好看 所本篇將記錄記錄 Class 與 Style 綁定 的學習 總所周知,想要給DOM ...
  • 回顧 大致掌握了上一節的 插值語法 我已經可以把想要的數據顯示到頁面上,並且僅需要修改變數,頁面就會跟著實時改變 但如果對於已經熟悉前端的人來說,單單有數據還是不太行,還需要css對數據進行樣式的修飾,讓頁面更加好看 所本篇將記錄記錄 Class 與 Style 綁定 的學習 總所周知,想要給DOM ...
  • `async` 和 `defer` 是兩種不同的JavaScript特性,它們的主要區別在於它們的執行順序和時間點。 `async` 意味著函數或代碼塊會被非同步執行。當瀏覽器遇到帶有 `async` 屬性的資源時,它會立即開始下載該資源,同時繼續載入頁面。這樣可以避免由於同步執行而導致的頁面載入阻 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 如何實現一個雨滴落下效果 前言 下雨天坐在車窗前,看著雨滴順著車窗漸漸落下,這一唯美的場景,忍不住想記錄下來。最近在糾結電腦壁紙時,無意間看到有類似的場景,可以將自己喜歡的壁紙加上這種效果。作為多年切圖仔,不由地想到了用css動畫應該可以 ...
  • 描述 這是一個用於 Tampermonkey 或其他支持用戶腳本的瀏覽器擴展的油猴腳本。 看到論壇經常有小伙伴們需要下載某創力文檔-某人文庫一些免費文檔,但是相關網站瀏覽體驗不好各種廣告,各種登錄驗證,需要很多步驟才能下載文檔,該腳本就是為瞭解決您的煩惱而誕生,儘可能做到自動化。 安裝 安裝 Tam ...
  • 已經用 uni-app+vue3+ts 開發了一段時間,記錄一下日常遇見的問題和解決辦法 uni-app 中的單端代碼 uni-app 是支持多端,如果你想讓你的代碼,只在部分平臺使用,那麼就需要用的它的單端處理語法 //#ifdef 和 //#ifndef 等。 1. //#ifdef xxx 只 ...
一周排行
    -Advertisement-
    Play Games
  • 在C#中使用SQL Server實現事務的ACID(原子性、一致性、隔離性、持久性)屬性和使用資料庫鎖(悲觀鎖和樂觀鎖)時,你可以通過ADO.NET的SqlConnection和SqlTransaction類來實現。下麵是一些示例和概念說明。 實現ACID事務 ACID屬性是事務處理的四個基本特征, ...
  • 我們在《SqlSugar開發框架》中,Winform界面開發部分往往也用到了自定義的用戶控制項,對應一些特殊的界面或者常用到的一些局部界面內容,我們可以使用自定義的用戶控制項來提高界面的統一性,同時也增強了使用的便利性。如我們Winform界面中用到的分頁控制項、附件顯示內容、以及一些公司、部門、菜單的下... ...
  • 在本篇教程中,我們學習瞭如何在 Taurus.MVC WebMVC 中進行數據綁定操作。我們還學習瞭如何使用 ${屬性名稱} CMS 語法來綁定頁面上的元素與 Model 中的屬性。通過這些步驟,我們成功實現了一個簡單的數據綁定示例。 ...
  • 是在MVVM中用來傳遞消息的一種方式。它是在MVVMLight框架中提供的一個實現了IMessenger介面的類,可以用來在ViewModel之間、ViewModel和View之間傳遞消息。 Send 接受一個泛型參數,表示要發送的消息內容。 Register 方法用於註冊某個對象接收消息。 pub ...
  • 概述:在WPF中,通過EventHandler可實現基礎和高級的UI更新方式。基礎用法涉及在類中定義事件,併在UI中訂閱以執行更新操作。高級用法藉助Dispatcher類,確保在非UI線程上執行操作後,通過UI線程更新界面。這兩種方法提供了靈活而可靠的UI更新機制。 在WPF(Windows Pre ...
  • 概述:本文介紹了在C#程式開發中如何利用自定義擴展方法測量代碼執行時間。通過使用簡單的Action委托,開發者可以輕鬆獲取代碼塊的執行時間,幫助優化性能、驗證演算法效率以及監控系統性能。這種通用方法提供了一種便捷而有效的方式,有助於提高開發效率和代碼質量。 在軟體開發中,瞭解代碼執行時間是優化程式性能 ...
  • 概述:Cron表達式是一種強大的定時任務調度工具,通過配置不同欄位實現靈活的時間規定。在.NET中,Quartz庫提供了簡便的方式配置Cron表達式,實現精準的定時任務調度。這種靈活性和可擴展性使得開發者能夠根據需求輕鬆地制定和管理定時任務,例如每天備份系統日誌或其他重要操作。 Cron表達式詳解 ...
  • 概述:.NET提供多種定時器,如System.Windows.Forms.Timer適用於UI,System.Web.UI.Timer用於Web,System.Diagnostics.Timer用於性能監控,System.Threading.Timer和System.Timers.Timer用於一般 ...
  • 問題背景 有同事聯繫我說,在生產環境上,訪問不了我負責的common服務,然後我去檢查common服務的health endpoint, 沒問題,然後我問了下異常,timeout導致的System.OperationCanceledException。那大概率是客戶端的問題,會不會是埠耗盡,用ne ...
  • 前言: 在本篇 Taurus.MVC WebMVC 入門開發教程的第四篇文章中, 我們將學習如何實現數據列表的綁定,通過使用 List<Model> 來展示多個數據項。 我們將繼續使用 Taurus.Mvc 命名空間,同時探討如何在視圖中綁定並顯示一個 Model 列表。 步驟1:創建 Model ...