javascript解決小數(shù)的加減乘除精度丟失的方案
原因:js按照2進(jìn)制來(lái)處理小數(shù)的加減乘除,在arg1的基礎(chǔ)上 將arg2的精度進(jìn)行擴(kuò)展或逆擴(kuò)展匹配,所以會(huì)出現(xiàn)如下情況.
javascript(js)的小數(shù)點(diǎn)加減乘除問(wèn)題，是一個(gè)js的bug如0.3*1 = 0.2999999999等，下面列出可以完美求出相應(yīng)精度的四種js算法
function accDiv(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(".")[1].length}catch(e){}
try{t2=arg2.toString().split(".")[1].length}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(".",""))
r2=Number(arg2.toString().replace(".",""))
return accMul((r1/r2),pow(10,t2-t1));
}
}
//乘法
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){}
try{m+=s2.split(".")[1].length}catch(e){}
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
}
//加法
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2))
return (arg1*m+arg2*m)/m
}
//減法
function Subtr(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
m=Math.pow(10,Math.max(r1,r2));
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}
下面我們來(lái)具體分析洗在JavaScript中關(guān)于數(shù)字精度的丟失問(wèn)題
一、JS數(shù)字精度丟失的一些典型問(wèn)題
1. 兩個(gè)簡(jiǎn)單的浮點(diǎn)數(shù)相加
0.1 + 0.2 != 0.3 // true
Firebug
這真不是 Firebug 的問(wèn)題，可以用alert試試 （哈哈開(kāi)玩笑）。
看看Java的運(yùn)算結(jié)果
再看看Python
2. 大整數(shù)運(yùn)算
9999999999999999 == 10000000000000001 // ？
Firebug
16位和17位數(shù)竟然相等，沒(méi)天理啊。
又如
var x = 9007199254740992 x + 1 == x // ？
看結(jié)果
三觀(guān)又被顛覆了。
3. toFixed 不會(huì)四舍五入（Chrome）
1.335.toFixed(2) // 1.33
Firebug
線(xiàn)上曾經(jīng)發(fā)生過(guò) Chrome 中價(jià)格和其它瀏覽器不一致，正是因?yàn)?toFixed 兼容性問(wèn)題導(dǎo)致
二、JS 數(shù)字丟失精度的原因
計(jì)算機(jī)的二進(jìn)制實(shí)現(xiàn)和位數(shù)限制有些數(shù)無(wú)法有限表示。就像一些無(wú)理數(shù)不能有限表示，如 圓周率 3.1415926...，1.3333... 等。JS 遵循 IEEE 754 規(guī)范，采用雙精度存儲(chǔ)（double precision），占用 64 bit。如圖
意義
- 1位用來(lái)表示符號(hào)位
- 11位用來(lái)表示指數(shù)
- 52位表示尾數(shù)
浮點(diǎn)數(shù)，比如
0.1 >> 0.0001 1001 1001 1001…（1001無(wú)限循環(huán)） 0.2 >> 0.0011 0011 0011 0011…（0011無(wú)限循環(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)制表示里卻是無(wú)窮的，由于存儲(chǔ)位數(shù)限制因此存在“舍去”，精度丟失就發(fā)生了。
想了解更深入的分析可以看這篇論文（又長(zhǎng)又臭）：What Every Computer Scientist Should Know About Floating-Point Arithmetic
三、解決方案
對(duì)于整數(shù)，前端出現(xiàn)問(wèn)題的幾率可能比較低，畢竟很少有業(yè)務(wù)需要需要用到超大整數(shù)，只要運(yùn)算結(jié)果不超過(guò) Math.pow(2, 53) 就不會(huì)丟失精度。
對(duì)于小數(shù)，前端出現(xiàn)問(wèn)題的幾率還是很多的，尤其在一些電商網(wǎng)站涉及到金額等數(shù)據(jù)。解決方式：把小數(shù)放到位整數(shù)（乘倍數(shù)），再縮小回原來(lái)倍數(shù)（除倍數(shù)）
// 0.1 + 0.2 (0.1*10 + 0.2*10) / 10 == 0.3 // true
以下是我寫(xiě)了一個(gè)對(duì)象，對(duì)小數(shù)的加減乘除運(yùn)算丟失精度做了屏蔽。當(dāng)然轉(zhuǎn)換后的整數(shù)依然不能超過(guò) 9007199254740992。
/**
* floatObj 包含加減乘除四個(gè)方法，能確保浮點(diǎn)數(shù)運(yùn)算不丟失精度
*
* 我們知道計(jì)算機(jī)編程語(yǔ)言里浮點(diǎn)數(shù)計(jì)算會(huì)存在精度丟失問(wèn)題（或稱(chēng)舍入誤差），其根本原因是二進(jìn)制和實(shí)現(xiàn)位數(shù)限制有些數(shù)無(wú)法有限表示
* 以下是十進(jìn)制小數(shù)對(duì)應(yīng)的二進(jìn)制表示
* 0.1 >> 0.0001 1001 1001 1001…（1001無(wú)限循環(huán)）
* 0.2 >> 0.0011 0011 0011 0011…（0011無(wú)限循環(huán)）
* 計(jì)算機(jī)里每種數(shù)據(jù)類(lèi)型的存儲(chǔ)是一個(gè)有限寬度，比如 JavaScript 使用 64 位存儲(chǔ)數(shù)字類(lèi)型，因此超出的會(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: 1, 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)算類(lèi)型，有加減乘除（add/subtract/multiply/divide）
*
*/
function operation(a, b, digits, op) {
var o1 = toInteger(a)
var o2 = toInteger(b)
var n1 = o1.num
var n2 = o2.num
var t1 = o1.times
var t2 = o2.times
var max = t1 > t2 ? t1 : t2
var result = null
switch (op) {
case 'add':
if (t1 === t2) { // 兩個(gè)小數(shù)位數(shù)相同
result = n1 + n2
} else if (t1 > t2) { // o1 小數(shù)位 大于 o2
result = n1 + n2 * (t1 / t2)
} else { // o1 小數(shù)位 小于 o2
result = n1 * (t2 / t1) + n2
}
return result / max
case 'subtract':
if (t1 === t2) {
result = n1 - n2
} else if (t1 > t2) {
result = n1 - n2 * (t1 / t2)
} else {
result = n1 * (t2 / t1) - n2
}
return result / max
case 'multiply':
result = (n1 * n2) / (t1 * t2)
return result
case 'divide':
result = (n1 / n2) * (t2 / t1)
return result
}
}
// 加減乘除的四個(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)文章
下面小編就為大家分享一篇仿京東快報(bào)向上滾動(dòng)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
js中class的點(diǎn)擊事件沒(méi)有效果的解決方法
下面小編就為大家?guī)?lái)一篇js中class的點(diǎn)擊事件沒(méi)有效果的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10
本篇文章給大家分享了作者在學(xué)習(xí)JavaScript異步加載中遇到的問(wèn)題，總結(jié)后給出了詳細(xì)的處理方案，有興趣的朋友可以學(xué)習(xí)下。2018-02-02
javascript實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示代碼
關(guān)鍵詞高亮想必大家對(duì)它都不陌生吧，應(yīng)用也比較廣泛的，下面為大家介紹下通過(guò)javascript是如何實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示2014-04-04
JavaScript插件化開(kāi)發(fā)教程 （一）
這篇文章主要介紹了JavaScript插件化開(kāi)發(fā)教程，十分的詳細(xì)，2015-01-01
JavaScript DOM節(jié)點(diǎn)添加示例
本節(jié)為大家介紹下JavaScript DOM節(jié)點(diǎn)添加，將node里面的str放到h1段落中使之成為h1的新段落2014-07-07
這篇文章主要介紹了JavaScript阻止表單提交方法,通過(guò)代碼示例講解了阻止表單提交需要注意的事項(xiàng)，以及onSubmit和check（）的區(qū)別寫(xiě)法,需要的朋友可以參考下2017-08-08
js中window.open()的所有參數(shù)詳細(xì)解析
本篇文章主要是對(duì)js中window.open()的所有參數(shù)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
這篇文章主要介紹了BootStrap 彈出層代碼的相關(guān)資料,非常補(bǔ)充，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
JS對(duì)select控件option選項(xiàng)的增刪改查示例代碼
Javascript操作select是表單中比較常見(jiàn)的，大家可以在網(wǎng)上搜索到很多的相關(guān)資料，接下來(lái)為大家詳細(xì)介紹下，JS動(dòng)態(tài)操作select中的各種方法，感興趣的朋友可以參考下2013-10-10