JavaScript小数在做四则运算时,精度会丢失,这会在项目中引起诸多不便。先看个具体的例子:

 //较小的数运算
console.log(0.09999999 + 0.00000001); //0.09999999999999999
console.log(-0.09999999 - 0.00000001); //-0.09999999999999999
console.log(0.012345 * 0.000001); //1.2344999999999999e-8
console.log(0.000001 / 0.0001); //0.009999999999999998 //较大的数运算
console.log( * ); //

从上面的结果可以看出,都不是正确的。为了解决浮点数运算不准确的问题,在运算前我们把参加运算的数先升级(10的X的次方)到整数,等运算完后再降级(0.1的X

的次方)。具体的操作如下:

/**
* 四则运算
*
* @param x
* @param y
* @param op 操作符,0:加;1:减;2:乘;3:除
* @param acc 保留小数位个数,进行四舍五入
*/
function execute(x, y, op, acc) {
var xx = Number(x == undefined ? : x);
var yy = Number(y == undefined ? : y); //
var a = science(xx);
var b = science(yy); var na = a.r1;
var nb = b.r1; var ta = a.r2;
var tb = b.r2;
var maxt = Math.max(ta, tb); //精度值处理
var result = ;
switch (parseInt(op, )) {
case : //加
result = (xx * maxt + yy * maxt) / maxt;
break;
case : //减
result = (xx * maxt - yy * maxt) / maxt;
break;
case : // 乘
result = na * nb / (ta * tb);
break;
case : // 除
result = na / nb * (tb / ta);
default:
} //小数位数处理
if (acc) {
return Number(Number(result).toFixed(parseInt(acc)));
} else {
return Number(result);
}
}
/**
* 将数值升级(10的X的次方)到整数
*/
function science(num) {
var re = {
r1: , //数字去掉小数点后的值,也就是 r1*r2 的结果
r2: //小数部分,10的长度次幂
};
if (isInteger(num)) { //整数直接返回
re.r1 = num;
return re;
}
var snum = scienceNum(num + ""); //处理0.123e-10类似问题
var dotPos = snum.indexOf("."); //小数点位置
var len = snum.substr(dotPos + ).length; //小数点长度
re.r2 = Math.pow(, len);
re.r1 = parseInt(snum.replace(".", ""));
return re;
}
/**
* 将数值转为字符串
*
* 通过移动小数点 扩大倍数或缩小倍数(解决出现e+、e-的问题)
*
* JavaScript在以下情景会自动将数值转换为科学计数法:
* 1)小数点前的数字多于21位。
* 2)小数点后的零多于5个
*/
function scienceNum(value) {
if (!value) {
return value;
}
if (typeof value === 'number') {
value = value + ""
};
let eIndex = value.indexOf('E');
if (eIndex == -) {
eIndex = value.indexOf('e')
};
if (eIndex != -) {
let doubleStr = value.substring(, eIndex); //e前面的值
let eStr = parseInt(value.substring(eIndex + , value.length)); //e后面的值
let doubleStrArr = doubleStr.split('.');
let doubleStr1 = doubleStrArr[] || "";
let doubleStr2 = doubleStrArr[] || ""; if (eStr < ) { //e- 很小的数
let str1Len = doubleStr1.length;
let eStrs = Math.abs(eStr);
if (str1Len > eStrs) {
let nums = doubleStr1.substring(, eStrs);
let nume = doubleStr1.substring(eStrs, str1Len);
doubleStr = nums + "." + nume + nume;
} else if (str1Len < eStrs) {
let indexNum = eStrs - str1Len;
let str = _makeZero(indexNum); //用0补齐
doubleStr = '0.' + str + doubleStr1 + doubleStr2;
} else {
doubleStr = '0.' + doubleStr1 + doubleStr2;
}
} else { //e+ 很大的数
let str2Len = doubleStr2.length;
if (str2Len > eStr) {
let _nums = doubleStr2.substring(, eStr);
let _nume = doubleStr2.substring(eStr, str2Len);
doubleStr = doubleStr1 + _nums + '.' + _nume;
} else if (str2Len < eStr) {
let _indexNum = eStr - str2Len;
let _str = _makeZero(_indexNum); //用0补齐
doubleStr = doubleStr1 + doubleStr2 + _str;
} else {
doubleStr = doubleStr1 + doubleStr2;
}
}
value = doubleStr;
}
return value;
}
//生成num个0的字符串
function _makeZero(num) {
var str = '';
for (var i = ; i < num; i++) {
str += '';
}
return str;
} /**
* 判断是否为整数,字符整数也返回true
*
* @param num
* @returns
*/
function isInteger(num) {
return Math.floor(num) === Number(num);
}

为了调用方便,我们也可以增加如下几个方法:

//加法运算
function add(x, y, acc) {
return execute(x, y, , acc);
} //减法运算
function subtract(x, y, acc) {
return execute(x, y, , acc);
} //乘法运算
function multiply(x, y, acc) {
return execute(x, y, , acc);
} //除法运算
function divide(x, y, acc) {
return execute(x, y, , acc);
}

在上面的计算中,toFixed 方法默认采用四舍六入五成双算法。看个具体的例子:

    console.log(Number(9.8350).toFixed()); //9.84
console.log(Number(9.8351).toFixed()); //9.84
console.log(Number(9.8250).toFixed()); //9.82
console.log(Number(9.82501).toFixed()); //9.83

如果想改成四舍五入,可以重写该方法:

/**
* 默认toFixed方法为四舍六入五成双算法
* 重写toFixed方法调整为四舍五入算法
*/
Number.prototype.toFixed = function (d) {
var s = this + "";
if (!d) d = ;
if (typeof d == 'string') {
d = Number(d);
};
if (s.indexOf(".") == -) {
s += ".";
};
s = scienceNum(s); //处理e+、e-情况
s += new Array(d + ).join("");
if (new RegExp("^(-|\\+)?(\\d+(\\.\\d{0," + (d + ) + "})?)\\d*$").test(s)) {
var _s = "" + RegExp.$,
pm = RegExp.$,
a = RegExp.$.length,
b = true;
if (a == d + ) {
a = _s.match(/\d/g);
if (parseInt(a[a.length - ]) > ) {
for (var i = a.length - ; i >= ; i--) {
a[i] = parseInt(a[i]) + ;
if (a[i] == ) {
a[i] = ;
b = i != ;
} else break;
}
}
_s = a.join("").replace(new RegExp("(\\d+)(\\d{" + d + "})\\d$"), "$1.$2");
}
if (b) {
_s = _s.substr();
};
return (pm + _s).replace(/\.$/, "");
}
return this + "";
};

测试一下:

    console.log(Number(9.8350).toFixed()); //9.84
console.log(Number(9.8351).toFixed()); //9.84
console.log(Number(9.8250).toFixed()); //9.83
console.log(Number(9.82501).toFixed()); //9.83

Js四则运算精度问题处理的更多相关文章

  1. Long类型转json时前端js丢失精度解决方案

    一.问题背景 Java后端开发过程中,尤其是id字段,因数值太大,通过json形式传输到前端后,在js解析时,会丢失精度. 如果对精度丢失没有什么概念,可以看一个知乎的帖子,来感受一下:https:/ ...

  2. js double 精度损失 bugs

    js double 精度损失 bugs const arr = [ 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01, 0.01 ]; // [ ...

  3. vue js计算精度问题处理,兼容XP系统

    js计算精度问题(浮点数误差,大数计算出错) JavaScript 运算时经常遇到会 0.000000001 和 0.999999999 这样奇怪的结果. 网上教程一大篇,原理请百度,抄作业往下看!! ...

  4. JS浮点计算精度问题分析与解决

    问题描述 在JS计算四则运算时会遇到精度丢失的问题,会引起诸多问题,看看以下例子: 例如:在chrome控制台输入 0.1 + 0.7 输出结果是 0.7999999999999999 例如:0.1+ ...

  5. JS浮点数精度运算

    一般来讲,我们在项目中必不可少的需要进行各种数值的计算,但是这种计算全部放在服务端会给服务器带来很大的压力,所以势必要客户端来 分担一些计算的压力. 从客户端来说,JavaScript是一门弱类型语言 ...

  6. js浮点数精度丢失问题及如何解决js中浮点数计算不精准

    js中进行数字计算时候,会出现精度误差的问题.先来看一个实例: console.log(0.1+0.2===0.3);//false console.log(0.1+0.1===0.2);//true ...

  7. javascript(js)小数精度丢失的解决方案

    原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3* ...

  8. js浮点数精度问题

    大多数语言在处理浮点数的时候都会遇到精度问题,但是在JS里似乎特别严重,来看一个例子 alert(45.6*13); 结果居然是592.800000000001,当然加法之类的也会有这个问题 那这是j ...

  9. mathjs,math.js解决js运算精度问题

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 阿里云ECS服务器windows环境下配置redis

    一.下载解压redis github下载地址:https://github.com/MSOpenTech/redis/tags 下载的是Redis-x64-3.2.100版本,Redis-x64-3. ...

  2. HTML5 canvas 学习

    一.canvas简介 ​ <canvas> 是 HTML5 新增的,一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素.它可以用来制作照片集或者制作简单(也不是 ...

  3. python 十进制 和 IP 地址互转

    #! /bin/python def ip2decimalism(ip): dec_value = 0 v_list = ip.split('.') v_list.reverse() t = 1 fo ...

  4. Codeforces Round #439 (Div. 2) A B C

    强哉qls,这场div2竟是其出的!!! A. The Artful Expedient 暴力 ^ ,判断是否出现,有大佬根据亦或的性质推出 Karen 必赢,太强啦23333333333333. # ...

  5. 使用hex编码绕过主机卫士IIS版本继续注入

    本文作者:非主流 测试文件的源码如下: 我们先直接加上单引号试试: http://192.168.0.20/conn.asp?id=1%27 很好,没有报错.那我们继续,and 1=1 和and 1= ...

  6. Java并发工具类之线程间数据交换工具Exchanger

    Exchanger是一个用于线程间协做的工具类,主要用于线程间的数据交换.它提供了一个同步点,在这个同步点,两个线程可以彼此交换数据.两个线程通过exchange方法交换数据,如果一个线程执行exch ...

  7. java求三角形面积以及周长---封装

    /*时间: 2012-10-08作者: 烟大程序要求: 1.封装一类三角形对象Triangle,该类对象具有三条边的属性, 具有初始化三角形的功能.修改边长的功能.判断三条边能否构成三角形的功能. 求 ...

  8. 彻底弄懂JS的事件冒泡和事件捕获(不推荐阅读)

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

  9. 下载apache-tomcat-9.0.17-windows-x64及安装以及用途

    首先我们先去这个网站下载http://www.apache.org/,进入Tomcat,点击Tomcat9 下载64-bit Windows_zip 当我们下载好了之后解压,把多余的文件删除掉,也可以 ...

  10. 从一个例子学习 instanceof 和 getclass 的区别

    判断两个对象是否为同一类型,时常用到getclass 和 instanceof ,而这两个函数又是时常让人混淆.下面从一个例子说明两者的区别: public class Test_drive { pu ...