一. 問題描述
最近在做一個項目，頁面上會存在一些JS浮點數的運算，發現JS浮點數運算存在一些bug.譬如:
0.1+0.2 == 0.30000000000000004 0.1 + 0.7 == 0.7999999999999999 7*0.8 == 5.6000000000000005 5.6/7 == 0.7999999999999999
二.解決方案
JS運算后都會有很小的誤差. 不像.Net或者Java那樣準確. 主要是JS重點不在運算上面,可是有時候項目一定要用到.想了一下大概有兩種解決方案
A 方案一:
運算結果保留2-3位小數位數. 前端界面一般用到的運算比較少。精度要求不會太高。 所以取2位小數位即可。
B. 方案二:
將小數位數轉換為整數運算. 譬如：
0.1+0.2 =》 (1+2)/10 == 0.3 0.1 + 0.7 =》 (1+7)/10 == 0.8 7*0.8 == (7*8)/10 == 5.6 5.6/7 == (56/7)/10 == 0.1
為了方便調用. 所以我們可以提取一個公共的方法出來.譬如下面的JSMath庫，JSMath重寫了加減乘除. 會先將參數轉換為整數再運算JSMath(參數1).操作(參數2)
參數1和參數2分別就是運算的第一個Number和第二個Number. 計算后通過Value屬性獲取值．
(function() { var JSMath = function() { return this; } JSMath.prototype.from = function(value) { // 支持JSMath參數傳遞主要是用于嵌套的調用 if ((typeof(value) == 'object') && (value.value != undefined)) { this.value = value.value; } else { this.value = value; } return this; } // 加法 JSMath.prototype.add = function(value) { var thisValueString = this.value.toString(); var valueString = value.toString(); var timesCount1 = 0; var timesCount2 = 0; if (thisValueString.indexOf('.') > 0) { timesCount1 = thisValueString.split('.')[1].length; } if (valueString.indexOf('.') > 0) { timesCount2 = valueString.split('.')[1].length; } var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2; this.value = (Math.pow(10, maxtimeCount) * this.value + Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount); return this; } // 減法 JSMath.prototype.sub = function(value) { var thisValueString = this.value.toString(); var valueString = value.toString(); var timesCount1 = 0; var timesCount2 = 0; if (thisValueString.indexOf('.') > 0) { timesCount1 = thisValueString.split('.')[1].length; } if (valueString.indexOf('.') > 0) { timesCount2 = valueString.split('.')[1].length; } var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2; this.value = (Math.pow(10, maxtimeCount) * this.value - Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount); return this; } // 除法 JSMath.prototype.div = function(value) { var thisValueString = this.value.toString(); var valueString = value.toString(); var timesCount1 = 0; var timesCount2 = 0; if (thisValueString.indexOf('.') > 0) { timesCount1 = thisValueString.split('.')[1].length; } if (valueString.indexOf('.') > 0) { timesCount2 = valueString.split('.')[1].length; } var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2; this.value = ((Math.pow(10, maxtimeCount) * this.value) / (Math.pow(10, maxtimeCount) * value)); return this; } // 乘法 JSMath.prototype.times = function(value) { var thisValueString = this.value.toString(); var valueString = value.toString(); var timesCount1 = 0; var timesCount2 = 0; if (thisValueString.indexOf('.') > 0) { timesCount1 = thisValueString.split('.')[1].length; } if (valueString.indexOf('.') > 0) { timesCount2 = valueString.split('.')[1].length; } var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2; this.value = (Math.pow(10, maxtimeCount) * this.value * Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount * 2); return this; } if (window.JSMath == undefined) { window.JSMath = function(value) { var result = new JSMath(); result.from(value); return result; } }})()B1.基本運算
0.1+0.2=> JSMath(0.1).add(0.2).value == 0.3 7+0.8=> JSMath(7).times(0.8).value == 5.6 5.6/7=> JSMath(5.6).div(7).value = 0.8
B2.多目運算
0.05 + 0.05 + 0.2=> JSMath(JSMath(0.05).add(0.05)).add(0.2).value == 0.3 (5+0.6)/7=> JSMath(JSMath(5).add(0.6)).div(7).value == 0.8
三．小總結
上面自己自己暫時知道的一些解決方案．不太清楚是否有開源的更可靠的三方庫來解決這個問題。以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
