如何解決0.1 +0.2===0.30000000000000004類問題

上篇博客深度剖析了0.1+0.2 === 0.30000000000000004的緣由。 這篇博客將主要提供幾種解決小數精度丟失問題的Javascript類庫的代碼示例,以及簡單的原生EcmaScript方法的代碼示例。css

一.類庫部分

math.js

math.js是JavaScript和Node.js的一個普遍的數學庫。支持數字,大數,複數,分數,單位和矩陣等數據類型的運算。git

官網:mathjs.org/ GitHub:github.com/josdejong/m…github

0.1+0.2 ===0.3實現代碼:npm

var math = require('mathjs')
console.log(math.add(0.1,0.2))//0.30000000000000004
console.log(math.format((math.add(math.bignumber(0.1),math.bignumber(0.2)))))//'0.3'
複製代碼

decimal.js

爲 JavaScript 提供十進制類型的任意精度數值。api

官網:mikemcl.github.io/decimal.js/瀏覽器

GitHub:github.com/MikeMcl/dec…bash

var Decimal = require('decimal.js')
x = new  Decimal(0.1)
y = 0.2
console.log(x.plus(y).toString())//'0.3'
複製代碼

bignumber.js

用於任意精度算術的JavaScript庫。測試

官網:mikemcl.github.io/bignumber.j…網站

Github:github.com/MikeMcl/big…ui

var BigNumber = require("bignumber.js")
x = new BigNumber(0.1)
y = 0.2
console.log(x.plus(y).toString())//'0.3'
複製代碼

big.js

用於任意精度十進制算術的小型快速JavaScript庫。 官網:mikemcl.github.io/big.js/ Github:github.com/MikeMcl/big…

var Big = require("big.js")
x = new Big(0.1)
y = 0.2
console.log(x.plus(y).toString())//'0.3'
複製代碼

有一個須要注意的點,使用類庫此時輸出的0.3是String類型,所以若想保持爲Number類型,可以使用parseFloat()方法。

還有一個注意點,在本地install測試的時候,npm i mathjs -g ,require是也要require('mathjs'),而不是帶點的math.js,由於josdejong這哥們在建立項目的時候就命名爲mathjs,而同時擁有上述decimal.js, bignumber.js和big.js的MikeMcl,項目名字就帶了dot,所以安裝和引入時,都是xxx.js的形式。

如何在這三個類庫之間作選擇,還須要你們本身根據具體狀況具體分析,我在這裏就不贅述了。

最後,教你們一個線上直接測試的網站,npm.runkit.com,子路徑輸入想要測試的Node.js package名,就能夠實如今線測試包中的api了。 例如: math.js:npm.runkit.com/mathjs big.js:npm.runkit.com/big.js

2、原生方法

類庫其實很強大,咱們計算0.1+0.2其實只是用到了冰山一角,那麼咱們如何使用原生的EcmaScript代碼來應用於簡單的問題場景呢?

這就要用到Number.prototype.toFixed()這個方法了。

浮點數運算

toFixed() 方法

浮點數運算的解決方案有不少,這裏給出一種目前經常使用的解決方案, 在判斷浮點數運算結果前對計算結果進行精度縮小,由於在精度縮小的過程總會自動四捨五入。

toFixed() 方法使用定點表示法來格式化一個數,會對結果進行四捨五入。語法爲:

JavaScript 代碼: numObj.toFixed(digits) 參數 digits 表示小數點後數字的個數;介於 0 到 20 (包括)之間,實現環境可能支持更大範圍。若是忽略該參數,則默認爲 0。

返回一個數值的字符串表現形式,不使用指數記數法,而是在小數點後有 digits 位數字。該數值在必要時進行四捨五入,另外在必要時會用 0 來填充小數部分,以便小數部分有指定的位數。 若是數值大於 1e+21,該方法會簡單調用 Number.prototype.toString()並返回一個指數記數法格式的字符串。

特別注意:toFixed() 返回一個數值的字符串表現形式。

具體能夠查看 MDN中的說明,那麼咱們能夠這樣解決精度問題:

JavaScript 代碼:

parseFloat((數學表達式).toFixed(digits)); // toFixed() 精度參數須在 0 與20 之間,建議傳2。2是爲了處理5/9這樣的無限循環小數。
// 運行
parseFloat((0.1 + 0.2).toFixed(10))//結果爲0.3
parseFloat((0.3 / 0.1).toFixed(10)) // 結果爲 3  
parseFloat((0.7 * 180).toFixed(10))//結果爲126
parseFloat((1.0 - 0.9).toFixed(10)) // 結果爲 0.1   
parseFloat((9.7 * 100).toFixed(10)) // 結果爲 970 
parseFloat((2.22 + 0.1).toFixed(10)) // 結果爲 2.32
複製代碼

在Browser環境精度參數容許0~100位之間(包括100),測試版本爲Chrome62(64位)和Firefox56 (32 位)。 在Nodejs環境中,只能是0~20之間,測試版本爲v6.9.5。

其次就是toFixed()的瀏覽器兼容性討論,MDN給出的結果所有是YES,不管desktop端仍是mobile端,也就是說不用擔憂toFixed()的兼容性問題(ie8- 咱們不作討論)。

desktop端:

mobile端:

Thanks: www.css88.com/archives/73… developer.mozilla.org/zh-CN/docs/…


2019.7.28更新:

parseFloat((5/9).toFixed(10))返回0.5555555556。因此更爲建議的作法是parseFloat((5/9).toFixed(2)),把小數控制在2位。

錢的計算是最複雜的,例如人民幣的計算,其實最終精確到分就很能夠了,元角。釐這個單位很小,生活中已經不多見了。

相關文章
相關標籤/搜索