Javascript中toFixed計算錯誤(依賴銀行家舍入法的缺陷)解決方法
前言
在公司項目中涉及到一個有大量浮點數(shù)價格計算的模塊,從而引發(fā)了我一系列的思考:
計算機(jī)二進(jìn)制環(huán)境下浮點數(shù)的計算精度缺失問題;
console.log(.1+.2); 0.30000000000000004
為了解決上述問題,使用了toFixed方法卻出現(xiàn)了浮點數(shù)小數(shù)位以5結(jié)尾的四舍五入錯誤問題;
var num = 0.045; console.log(num.toFixed(2)); 0.04
以此為起點,引發(fā)了我關(guān)于toFixed的一系列探索,終于找到了一些有用的信息,toFixed使用的計算規(guī)則是:
銀行家舍入:所謂銀行家舍入法,其實質(zhì)是一種四舍六入五取偶(又稱四舍六入五留雙)法。
簡單來說就是:四舍六入五考慮,五后非零就進(jìn)一,五后為零看奇偶,五前為偶應(yīng)舍去,五前為奇要進(jìn)一。
正文
下面我們就來證實這個所謂的銀行家舍入法,證實分為三種情況,分別以4、5、6為舍入位對toFixed的證實(以chrome為例):
以4為舍入位:
var num = 0.004; console.log(num.toFixed(2)); 0.00 var num = 0.014; console.log(num.toFixed(2)); 0.01 var num = 0.094; console.log(num.toFixed(2)); 0.09
在4結(jié)尾這種情況下toFixed表現(xiàn)的還算不錯,并沒有錯誤的問題。
以6為舍入位:
var num = 0.006; console.log(num.toFixed(2)); 0.01 var num = 0.016; console.log(num.toFixed(2)); 0.02 var num = 0.096; console.log(num.toFixed(2)); 0.10
以6結(jié)尾這種情況下toFixed表現(xiàn)的也不錯,并沒有錯誤的問題。
以5為舍入位:
5后非零:
var num = 0.0051; console.log(num.toFixed(2)); 0.01 var num = 0.0052; console.log(num.toFixed(2)); 0.01 var num = 0.0059; console.log(num.toFixed(2)); 0.01
根據(jù)規(guī)則,五后非零就進(jìn)一,我們證實并沒有任何的問題。
以5為舍入位:
5后為零: 由于這種情況比較特殊,是toFixed方法出現(xiàn)計算錯誤的情況,所以我進(jìn)行了大量的證實,且分別在常見的主流瀏覽器下進(jìn)行了測試:
以如下測試用例為例:
var num = 0.005; console.log(num.toFixed(2)); var num = 0.015; console.log(num.toFixed(2)); var num = 0.025; console.log(num.toFixed(2)); var num = 0.035; console.log(num.toFixed(2)); var num = 0.045; console.log(num.toFixed(2)); var num = 0.055; console.log(num.toFixed(2)); var num = 0.065; console.log(num.toFixed(2)); var num = 0.075; console.log(num.toFixed(2)); var num = 0.085; console.log(num.toFixed(2)); var num = 0.095; console.log(num.toFixed(2));
chrome、firefox、safari、opera的結(jié)果如下:
0.01
0.01
0.03
0.04
0.04
0.06
0.07
0.07
0.09
0.10
ie11結(jié)果如下:
0.01
0.02
0.03
0.04
0.05
0.06
0.07
0.08
0.09
0.10
可以看出Ie11下正常,其余瀏覽器下均出現(xiàn)錯誤。雖然并不完全符合銀行家舍入法的規(guī)則,我認(rèn)為是由于二進(jìn)制下浮點數(shù)的坑導(dǎo)致了不完全符合該規(guī)則。
總而言之:不論引入toFixed解決浮點數(shù)計算精度缺失的問題也好,它有沒有使用銀行家舍入法也罷,都是為了解決精度的問題,但是又離不開二進(jìn)制浮點數(shù)的環(huán)境,但至少他幫助我們找到了問題所在,從而讓我們有解決方法。
解決方法
下面我提供一種通過重寫toFixed的方法:
Number.prototype.toFixed = function(length) { var carry = 0; //存放進(jìn)位標(biāo)志 var num,multiple; //num為原浮點數(shù)放大multiple倍后的數(shù),multiple為10的length次方 var str = this + ''; //將調(diào)用該方法的數(shù)字轉(zhuǎn)為字符串 var dot = str.indexOf("."); //找到小數(shù)點的位置 if(str.substr(dot+length+1,1)>=5) carry=1; //找到要進(jìn)行舍入的數(shù)的位置,手動判斷是否大于等于5,滿足條件進(jìn)位標(biāo)志置為1 multiple = Math.pow(10,length); //設(shè)置浮點數(shù)要擴(kuò)大的倍數(shù) num = Math.floor(this * multiple) + carry; //去掉舍入位后的所有數(shù),然后加上我們的手動進(jìn)位數(shù) var result = num/multiple + ''; //將進(jìn)位后的整數(shù)再縮小為原浮點數(shù) /* * 處理進(jìn)位后無小數(shù) */ dot = result.indexOf("."); if(dot < 0){ result += '.'; dot = result.indexOf("."); } /* * 處理多次進(jìn)位 */ var len = result.length - (dot+1); if(len < length){ for(var i = 0; i < length - len; i++){ result += 0; } } return result; }
該方法的大致思路是首先找到舍入位,判斷該位置是否大于等于5,條件成立手動進(jìn)一位,然后通過參數(shù)大小將原浮點數(shù)放大10的參數(shù)指數(shù)倍,然后再將包括舍入位后的位數(shù)利用floor全部去掉,根據(jù)我們之前的手動進(jìn)位來確定是否進(jìn)位。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS處理數(shù)據(jù)四舍五入(tofixed與round的區(qū)別詳解)
- JS使用tofixed與round處理數(shù)據(jù)四舍五入的區(qū)別
- Javascript中 toFixed四舍六入方法
- JavaScript中Number對象的toFixed() 方法詳解
- js toFixed()方法的重寫實現(xiàn)精度的統(tǒng)一
- js保留兩位小數(shù)使用toFixed實現(xiàn)
- javascript中的toFixed固定小數(shù)位數(shù) 簡單實例分享
- JS中toFixed()方法引起的問題如何解決
- JavaScript toFixed() 方法
- javascript之對系統(tǒng)的toFixed()方法的修正
- javascript中toFixed()四舍五入使用方法詳解
相關(guān)文章
JS中循環(huán)遍歷數(shù)組的四種方式總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JS中循環(huán)遍歷數(shù)組的四種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01javascript代碼編寫需要注意的7個小細(xì)節(jié)小結(jié)
每種語言都有它特別的地方,對于JavaScript來說,使用var就可以聲明任意類型的變量,這門腳本語言看起來很簡單,然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個細(xì)節(jié),與大家分享。2011-09-09JS實現(xiàn)頭條新聞的經(jīng)典輪播圖效果示例
這篇文章主要介紹了JS實現(xiàn)頭條新聞的經(jīng)典輪播圖效果,涉及javascript圖片輪播切換相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01Javascript 獲取字符串字節(jié)數(shù)的多種方法
Javascript 字符串字節(jié)數(shù)獲取功能多種方法2009-06-06