詳解JS-- 浮點(diǎn)數(shù)運(yùn)算處理
更新時(shí)間：2016年11月28日 08:25:14 作者：我有一顆四葉草
本篇文章主要介紹了JS--浮點(diǎn)數(shù)運(yùn)算處理，現(xiàn)在分享給大家，也給大家做個(gè)參考。感興趣的小伙伴們可以參考一下。
一. 問題描述
最近在做一個(gè)項(xiàng)目，頁(yè)面上會(huì)存在一些JS浮點(diǎn)數(shù)的運(yùn)算，發(fā)現(xiàn)JS浮點(diǎn)數(shù)運(yùn)算存在一些bug.譬如:
0.1+0.2 == 0.30000000000000004 0.1 + 0.7 == 0.7999999999999999 7*0.8 == 5.6000000000000005 5.6/7 == 0.7999999999999999
二.解決方案
JS運(yùn)算后都會(huì)有很小的誤差. 不像.Net或者Java那樣準(zhǔn)確. 主要是JS重點(diǎn)不在運(yùn)算上面,可是有時(shí)候項(xiàng)目一定要用到.想了一下大概有兩種解決方案
A 方案一:
運(yùn)算結(jié)果保留2-3位小數(shù)位數(shù). 前端界面一般用到的運(yùn)算比較少。精度要求不會(huì)太高。 所以取2位小數(shù)位即可。
B. 方案二:
將小數(shù)位數(shù)轉(zhuǎn)換為整數(shù)運(yùn)算. 譬如：
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
為了方便調(diào)用. 所以我們可以提取一個(gè)公共的方法出來.譬如下面的JSMath庫(kù)，JSMath重寫了加減乘除. 會(huì)先將參數(shù)轉(zhuǎn)換為整數(shù)再運(yùn)算JSMath(參數(shù)1).操作(參數(shù)2)
參數(shù)1和參數(shù)2分別就是運(yùn)算的第一個(gè)Number和第二個(gè)Number. 計(jì)算后通過Value屬性獲取值．
(function() {
var JSMath = function() {
return this;
}
JSMath.prototype.from = function(value) {
// 支持JSMath參數(shù)傳遞主要是用于嵌套的調(diào)用
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.基本運(yùn)算
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.多目運(yùn)算
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
三．小總結(jié)
上面自己自己暫時(shí)知道的一些解決方案．不太清楚是否有開源的更可靠的三方庫(kù)來解決這個(gè)問題。以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- javascript將浮點(diǎn)數(shù)轉(zhuǎn)換成整數(shù)的三個(gè)方法
- 跟我學(xué)習(xí)javascript的浮點(diǎn)數(shù)精度
- 深入理解JavaScript中的浮點(diǎn)數(shù)
- JavaScript浮點(diǎn)數(shù)及運(yùn)算精度調(diào)整詳解
- JavaScript解決浮點(diǎn)數(shù)計(jì)算不準(zhǔn)確問題的方法分析
- 詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問題
- JS實(shí)現(xiàn)的進(jìn)制轉(zhuǎn)換，浮點(diǎn)數(shù)相加，數(shù)字判斷操作示例
- JS中浮點(diǎn)數(shù)精度問題的分析與解決方法
- 處理JavaScript浮點(diǎn)數(shù)精度問題的解決方案
- JavaScript 浮點(diǎn)數(shù)精度問題小結(jié)
相關(guān)文章
js split 的用法和定義 js split分割字符串成數(shù)組的實(shí)例代碼
關(guān)于js split的用法，我們經(jīng)常用來將字符串分割為數(shù)組方便后續(xù)操作，今天寫一段廣告判斷代碼的時(shí)候，竟然忘了split的用法了，特整理下，方便需要的朋友2012-05-05
本文結(jié)合自己學(xué)習(xí)javascript的經(jīng)驗(yàn)，向大家推薦了循序漸進(jìn)的學(xué)習(xí)javascript的自學(xué)的軌跡，非常的合理，給有需要的小伙伴們參考下吧。2014-12-12
本篇文章，小編將為大家介紹，JS中 用戶登錄系統(tǒng)的解決辦法，有需要的朋友可以參考一下2013-04-04
javascript確認(rèn)框的三種使用方法，在開發(fā)中經(jīng)常要用到，記錄一下使用方法2013-12-12
js實(shí)現(xiàn)各瀏覽器全屏代碼實(shí)例
本篇文章給大家分享了js實(shí)現(xiàn)各瀏覽器全屏的詳細(xì)代碼，有興趣的朋友可以參考學(xué)習(xí)下。2018-07-07
這篇文章主要介紹了Javascript基礎(chǔ)教程之比較操作符,需要的朋友可以參考下2015-01-01
菜鳥學(xué)習(xí)JavaScript小實(shí)驗(yàn)之函數(shù)引用
由于變量b中保存的是函數(shù)的引用，當(dāng)函數(shù)變化時(shí)，b也隨時(shí)變化，且不管函數(shù)出現(xiàn)的先后順序。兩次alert（b），雖然位置不一樣，但是內(nèi)容相同。2010-11-11
JavaScript的繼承實(shí)現(xiàn)小結(jié)
JavaScript作為面向?qū)ο蟮娜躅愋驼Z(yǔ)言，繼承也是其非常強(qiáng)大的特性之一。那么如何在JS中實(shí)現(xiàn)繼承呢？本文將給大家揭開神秘面紗2017-05-05
這篇文章主要介紹了介紹JavaScript中Math.abs()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
下面分享網(wǎng)頁(yè)全屏顯示代碼，想做全屏顯示效果的朋友可以參照下。2009-07-07