解決JavaScript數(shù)字精度丟失問題的方法
本文分為三個(gè)部分
- JS 數(shù)字精度丟失的一些典型問題
- JS 數(shù)字精度丟失的原因
- 解決方案(一個(gè)對(duì)象+一個(gè)函數(shù))
一、JS數(shù)字精度丟失的一些典型問題
1. 兩個(gè)簡單的浮點(diǎn)數(shù)相加
0.1 + 0.2 != 0.3 // true
這真不是 Firebug 的問題,可以用alert試試 (哈哈開玩笑)。
看看Java的運(yùn)算結(jié)果
再看看Python
2. 大整數(shù)運(yùn)算
16位和17位數(shù)竟然相等,沒天理啊。
又如
var x = 9007199254740992 x + 1 == x // ?
看結(jié)果
三觀又被顛覆了。
3. toFixed 不會(huì)四舍五入(Chrome)
線上曾經(jīng)發(fā)生過 Chrome 中價(jià)格和其它瀏覽器不一致
二、JS 數(shù)字丟失精度的原因
計(jì)算機(jī)的二進(jìn)制實(shí)現(xiàn)和位數(shù)限制有些數(shù)無法有限表示。就像一些無理數(shù)不能有限表示,如 圓周率 3.1415926...,1.3333... 等。JS 遵循 IEEE 754 規(guī)范,采用雙精度存儲(chǔ)(double precision),占用 64 bit。如圖
意義
- 1位用來表示符號(hào)位
- 11位用來表示指數(shù)
- 52位表示尾數(shù)
浮點(diǎn)數(shù),比如
0.1 >> 0.0001 1001 1001 1001…(1001無限循環(huán)) 0.2 >> 0.0011 0011 0011 0011…(0011無限循環(huán))
此時(shí)只能模仿十進(jìn)制進(jìn)行四舍五入了,但是二進(jìn)制只有 0 和 1 兩個(gè),于是變?yōu)?0 舍 1 入。這即是計(jì)算機(jī)中部分浮點(diǎn)數(shù)運(yùn)算時(shí)出現(xiàn)誤差,丟失精度的根本原因。
大整數(shù)的精度丟失和浮點(diǎn)數(shù)本質(zhì)上是一樣的,尾數(shù)位最大是52位,因此 JS 中能精準(zhǔn)表示的最大整數(shù)是 Math.pow(2, 53),十進(jìn)制即 9007199254740992。
大于 9007199254740992 的可能會(huì)丟失精度
9007199254740992 >> 10000000000000...000 // 共計(jì) 53 個(gè) 0 9007199254740992 + 1 >> 10000000000000...001 // 中間 52 個(gè) 0 9007199254740992 + 2 >> 10000000000000...010 // 中間 51 個(gè) 0
實(shí)際上
9007199254740992 + 1 // 丟失 9007199254740992 + 2 // 未丟失 9007199254740992 + 3 // 丟失 9007199254740992 + 4 // 未丟失
結(jié)果如圖
以上,可以知道看似有窮的數(shù)字, 在計(jì)算機(jī)的二進(jìn)制表示里卻是無窮的,由于存儲(chǔ)位數(shù)限制因此存在“舍去”,精度丟失就發(fā)生了。
三、解決方案
對(duì)于整數(shù),前端出現(xiàn)問題的幾率可能比較低,畢竟很少有業(yè)務(wù)需要需要用到超大整數(shù),只要運(yùn)算結(jié)果不超過 Math.pow(2, 53) 就不會(huì)丟失精度。
對(duì)于小數(shù),前端出現(xiàn)問題的幾率還是很多的,尤其在一些電商網(wǎng)站涉及到金額等數(shù)據(jù)。解決方式:把小數(shù)放到位整數(shù)(乘倍數(shù)),再縮小回原來倍數(shù)(除倍數(shù))
// 0.1 + 0.2 (0.1*10 + 0.2*10) / 10 == 0.3 // true
以下是我寫了一個(gè)對(duì)象,對(duì)小數(shù)的加減乘除運(yùn)算丟失精度做了屏蔽。當(dāng)然轉(zhuǎn)換后的整數(shù)依然不能超過 9007199254740992。
/** * floatObj 包含加減乘除四個(gè)方法,能確保浮點(diǎn)數(shù)運(yùn)算不丟失精度 * * 我們知道計(jì)算機(jī)編程語言里浮點(diǎn)數(shù)計(jì)算會(huì)存在精度丟失問題(或稱舍入誤差),其根本原因是二進(jìn)制和實(shí)現(xiàn)位數(shù)限制有些數(shù)無法有限表示 * 以下是十進(jìn)制小數(shù)對(duì)應(yīng)的二進(jìn)制表示 * 0.1 >> 0.0001 1001 1001 1001…(1001無限循環(huán)) * 0.2 >> 0.0011 0011 0011 0011…(0011無限循環(huán)) * 計(jì)算機(jī)里每種數(shù)據(jù)類型的存儲(chǔ)是一個(gè)有限寬度,比如 JavaScript 使用 64 位存儲(chǔ)數(shù)字類型,因此超出的會(huì)舍去。舍去的部分就是精度丟失的部分。 * * ** method ** * add / subtract / multiply /divide * * ** explame ** * 0.1 + 0.2 == 0.30000000000000004 (多了 0.00000000000004) * 0.2 + 0.4 == 0.6000000000000001 (多了 0.0000000000001) * 19.9 * 100 == 1989.9999999999998 (少了 0.0000000000002) * * floatObj.add(0.1, 0.2) >> 0.3 * floatObj.multiply(19.9, 100) >> 1990 * */ var floatObj = function() { /* * 判斷obj是否為一個(gè)整數(shù) */ function isInteger(obj) { return Math.floor(obj) === obj } /* * 將一個(gè)浮點(diǎn)數(shù)轉(zhuǎn)成整數(shù),返回整數(shù)和倍數(shù)。如 3.14 >> 314,倍數(shù)是 100 * @param floatNum {number} 小數(shù) * @return {object} * {times:100, num: 314} */ function toInteger(floatNum) { var ret = {times: 0, num: 0} if (isInteger(floatNum)) { ret.num = floatNum return ret } var strfi = floatNum + '' var dotPos = strfi.indexOf('.') var len = strfi.substr(dotPos+1).length var times = Math.pow(10, len) var intNum = parseInt(floatNum * times + 0.5, 10) ret.times = times ret.num = intNum return ret } /* * 核心方法,實(shí)現(xiàn)加減乘除運(yùn)算,確保不丟失精度 * 思路:把小數(shù)放大為整數(shù)(乘),進(jìn)行算術(shù)運(yùn)算,再縮小為小數(shù)(除) * * @param a {number} 運(yùn)算數(shù)1 * @param b {number} 運(yùn)算數(shù)2 * @param digits {number} 精度,保留的小數(shù)點(diǎn)數(shù),比如 2, 即保留為兩位小數(shù) * @param op {string} 運(yùn)算類型,有加減乘除(add/subtract/multiply/divide) * */ function operation(a, b, digits, op) { var o1 = toInteger(a) var o2 = toInteger(b) var max = o1.times > o2.times ? o1.times : o2.times var result = null switch (op) { case 'add': result = o1.num + o2.num break case 'subtract': result = o1.num - o2.num break case 'multiply': result = o1.num * o2.num break case 'divide': result = o1.num / o2.num break } return result / max } // 加減乘除的四個(gè)接口 function add(a, b, digits) { return operation(a, b, digits, 'add') } function subtract(a, b, digits) { return operation(a, b, digits, 'subtract') } function multiply(a, b, digits) { return operation(a, b, digits, 'multiply') } function divide(a, b, digits) { return operation(a, b, digits, 'divide') } // exports return { add: add, subtract: subtract, multiply: multiply, divide: divide } }();
toFixed的修復(fù)如下
// toFixed 修復(fù) function toFixed(num, s) { var times = Math.pow(10, s) var des = num * times + 0.5 des = parseInt(des, 10) / times return des + '' }
以上就是關(guān)于JavaScript數(shù)字精度丟失問題全部內(nèi)容,對(duì)典型問題進(jìn)行分析,分析數(shù)字精度丟失原因,還分享了解決方案,希望對(duì)大家的學(xué)習(xí)有所幫助。
相關(guān)文章
javascript實(shí)現(xiàn)避免頁面按鈕重復(fù)提交
很多時(shí)候我們都需要防止重復(fù)提交,這方面的文章也比較多,實(shí)現(xiàn)的途徑差別也很大.因?yàn)橛行r(shí)候即使服務(wù)器能夠識(shí)別重復(fù)的提交,也會(huì)造成問題.比如需要很長等待時(shí)間的操作,在首次提交后,不斷重復(fù)提交,頁面可能會(huì)死掉.用腳本來控制的話可以防止這種問題.2015-01-01微信JS SDK接入的幾點(diǎn)注意事項(xiàng)(必看篇)
下面小編就為大家?guī)硪黄⑿臞S SDK接入的幾點(diǎn)注意事項(xiàng)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法
這篇文章主要介紹了js防止DIV布局滾動(dòng)時(shí)閃動(dòng)的解決方法,通過js的window.requestAnimationFrame來解決這一問題,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10JS實(shí)現(xiàn)的鼠標(biāo)跟隨代碼(卡通手型點(diǎn)擊效果)
這篇文章主要介紹了JS實(shí)現(xiàn)的鼠標(biāo)跟隨代碼,帶有卡通手型點(diǎn)擊效果.涉及JavaScript鼠標(biāo)事件的響應(yīng)與頁面元素的動(dòng)態(tài)調(diào)用技巧,需要的朋友可以參考下2015-10-10java前端javascript生成動(dòng)態(tài)表格示例演示
這篇文章主要為大家介紹了java前端javascript生成動(dòng)態(tài)表格的實(shí)現(xiàn)示例及演示,2022-03-03js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組實(shí)例代碼
JS中數(shù)組是我們較為常用的一種數(shù)據(jù)結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于js如何刪除對(duì)象/數(shù)組中null、undefined、空對(duì)象及空數(shù)組的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09教你用Uniapp實(shí)現(xiàn)微信小程序的GPS定位打卡
地圖組件用于展示地圖,而定位API只是獲取坐標(biāo),請(qǐng)勿混淆兩者,下面這篇文章主要給大家介紹了關(guān)于如何使用Uniapp實(shí)現(xiàn)微信小程序的GPS定位打卡的相關(guān)資料,需要的朋友可以參考下2022-11-11