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. 初探Angular_03 组件中模板数据绑定

    这里将介绍三种情况的数据绑定 需要TypeScript的基本知识,如TS数据类型 一.模板属性绑定数据 1.模板属性其实HTML的属性,如class,style,title等 2.先在header.c ...

  2. ASP.NET Core SignalR CORS 跨域问题

    将 SignalR 集成到 ASP.NET Core api 程序的时候,按照官方 DEMO 配置完成,本地访问没有问题,但是发布之后一直报跨域问题,本地是这样设置的: 原始代码: services. ...

  3. log4j学习(二)不同类的日志输出到不同的文件

    目的:一个应用中有两个不同作用的后台服务,我们需要把他们的日志分开,存放到2个不同的日志文件中. 办法:需要在log4j.properties文件中配置两个不同的logger和对应的appender ...

  4. centos7 虚拟机中,网卡不启动的解决方式

    使用NAT模式的虚拟centos, 只显示两个网卡,无法连接外网, 输入systemctl start network后报错信息" Restarting network (via syste ...

  5. js string 和 json 互转

    var o = JSON.parse('{"a": 8}'); JSON. stringify(o);

  6. ajax在php中应用实例

    1,ajax分为$.ajax(),$.get(),$.post(),$.getJSON() 几种形式,实例如下: <html> <meta http-equiv="Cont ...

  7. Good Bye 2017 G. New Year and Original Order

    G. New Year and Original Order time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  8. git 常用命令(不定期更新)

    过程写写吧,总是忘记.1,在一个文件夹下 键入 git init ,使之成为Git可以管理的仓库.2,编写一个文件readme.txt.3,把文件添加到仓库 git add readme.txt4,把 ...

  9. kubernetes traefik multiple namespaces

    官方文档在此 https://docs.traefik.io/user-guide/kubernetes/ 官方文档在配置 RBAC 时使用了 ClusterRoleBinding, 当你想用多命名空 ...

  10. js06

    接着我们继续学习一些js的知识,这里主要讲js的一些库jq与prototype的一些基础. 1.jq函数    $():向其传递DOM对象,返回jQuery对象        jq允许通过CSS选择器 ...