詳解JS-- 浮點(diǎn)數(shù)運(yùn)算處理
更新時(shí)間：2016年11月28日 08:25:14 作者：我有一顆四葉草
本篇文章主要介紹了JS--浮點(diǎn)數(shù)運(yùn)算處理，現(xiàn)在分享給大家，也給大家做個(gè)參考。感興趣的小伙伴們可以參考一下。
一. 問(wèn)題描述
最近在做一個(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è)公共的方法出來(lái).譬如下面的JSMath庫(kù)，JSMath重寫(xiě)了加減乘除. 會(huì)先將參數(shù)轉(zhuǎn)換為整數(shù)再運(yùn)算JSMath(參數(shù)1).操作(參數(shù)2)
參數(shù)1和參數(shù)2分別就是運(yùn)算的第一個(gè)Number和第二個(gè)Number. 計(jì)算后通過(guò)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āi)源的更可靠的三方庫(kù)來(lái)解決這個(gè)問(wèn)題。以上就是本文的全部?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)確問(wèn)題的方法分析
- 詳解JavaScript 浮點(diǎn)數(shù)運(yùn)算的精度問(wèn)題
- JS實(shí)現(xiàn)的進(jìn)制轉(zhuǎn)換，浮點(diǎn)數(shù)相加，數(shù)字判斷操作示例
- JS中浮點(diǎn)數(shù)精度問(wèn)題的分析與解決方法
- 處理JavaScript浮點(diǎn)數(shù)精度問(wèn)題的解決方案
- JavaScript 浮點(diǎn)數(shù)精度問(wèn)題小結(jié)
相關(guān)文章
實(shí)現(xiàn)高性能JavaScript之執(zhí)行與加載
avaScript在瀏覽器中的性能，此問(wèn)題因JavaScript的阻塞特征而復(fù)雜，也就是說(shuō)JavaScript運(yùn)行時(shí)其他的事情不能被瀏覽器處理，事實(shí)上，大多數(shù)瀏覽器使用單進(jìn)程處理JavaScript運(yùn)行等多個(gè)任務(wù)，而同一時(shí)間只能有一個(gè)任務(wù)被執(zhí)行。2016-01-01
從零學(xué)JSON之JSON數(shù)據(jù)結(jié)構(gòu)
這篇文章主要介紹了JSON數(shù)據(jù)結(jié)構(gòu)的相關(guān)知識(shí),需要的朋友可以參考下2014-05-05
詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用
這篇文章主要介紹了詳解JavaScript中數(shù)組和字符串的lastIndexOf()方法使用,文中特別提及了IE8的兼容問(wèn)題以及for in的使用問(wèn)題,需要的朋友可以參考下2016-03-03
js 實(shí)現(xiàn)復(fù)制到粘貼板的功能代碼
主要是用到了 window.clipboardData.setData("Text",copyText);2010-05-05
本文主要介紹AngularJS 指令,這里詳細(xì)介紹AngularJS 指令知識(shí)并提供實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
深入分析JavaScript 事件循環(huán)(Event Loop)
這篇文章主要介紹了JavaScript 事件循環(huán)(Event Loop)的的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程
instanceof運(yùn)算符可以用來(lái)判斷某個(gè)構(gòu)造函數(shù)的prototype屬性所指向的對(duì)象是否存在于另外一個(gè)要檢測(cè)對(duì)象的原型鏈上,這里我們就來(lái)看一下JavaScript的instanceof運(yùn)算符學(xué)習(xí)教程2016-06-06
詳解javascript設(shè)計(jì)模式三：代理模式
這篇文章主要介紹了javascript設(shè)計(jì)模式三：代理模式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
js獲取height和width屬性的值在日常開(kāi)發(fā)中很常見(jiàn)，于是本人搜集整理了一下，感興趣的朋友可以參考下2013-01-01
DHTML技術(shù)各項(xiàng)功能的實(shí)現(xiàn)都依賴(lài)于使用客戶(hù)端腳本與瀏覽器宿主及在宿主中輸出的Web頁(yè)面之間的交互，這種交互是通過(guò)對(duì)象這個(gè)技術(shù)手段實(shí)現(xiàn)的。2010-10-10