js精度误差
之前虽然有看到过 js 精度相关的文章。但也都没有“印象深刻” ，但是今天"有幸"遇到了。
做一个项目，进行页面调试的时候，
当数量增加到3时总价格变得好长好长
立马在控制台验证了一下，算出这么多个小数。
还好之前有看过这方面的文章，知道是js的精度问题（但也不是js本身的问题，而是二进制的问题）。
正确的应该是 239.7
然后找了几篇文章，最后打算用那个插件。可以用字符串进行运算，所以功能很强呀。也不大，5k而已~什么？你给我说流量？优化？百度首页？淘宝？好吧，等有门做那样的项目时再说吧。
想测试更多精度问题的问题试试：
9007199254740992 + 1 // 丢失
9007199254740992 + 2 // 未丢失
9007199254740992 + 3 // 丢失
9007199254740992 + 4 // 未丢失 var x = 0.3 - 0.2; //30美分减去20美分
var y = 0.2 - 0.1; //20美分减去10美分
x == y; // =>false,两值不相等
x == 0.1; // =>false,真实值为：0.09999999999999998
y == 0.1; // =>true
使用不同的函数分别计算+、-、*、/ ：
//问题比如：7*0.8 JavaScript算出来就是：5.6000000000000005
//加法函数，用来得到精确的加法结果
//说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
//调用：accAdd(arg1,arg2)
//返回值：arg1加上arg2的精确结果
function accAdd(arg1, arg2) {
var r1, r2, m;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2))
return (arg1 * m + arg2 * m) / m
}
//用法：
//给Number类型增加一个add方法，调用起来更加方便。
Number.prototype.add = function (arg) {
return accAdd(arg, this);
}
//如：
var t1 = 6.60;
var t2 = 1.32;
var t3 = 1.2;
var t4 = 1.2;
var t5 = 1.2;
alert(Number(t1).add(Number(t2)).add(Number(t3)).add(Number(t4)).add(Number(t5)));
//减法函数，用来得到精确的减法结果
function Subtr(arg1, arg2) {
var r1, r2, m, n;
try { r1 = arg1.toString().split(".")[1].length } catch (e) { r1 = 0 }
try { r2 = arg2.toString().split(".")[1].length } catch (e) { r2 = 0 }
m = Math.pow(10, Math.max(r1, r2));
//last modify by deeka
//动态控制精度长度
n = (r1 >= r2) ? r1 : r2;
return ((arg1 * m - arg2 * m) / m).toFixed(n);
}
//乘法函数，用来得到精确的乘法结果
//说明：javascript的乘法结果会有误差，在两个浮点数相乘的时候会比较明显。这个函数返回较为精确的乘法结果。
//调用：accMul(arg1,arg2)
//返回值：arg1乘以arg2的精确结果
function accMul(arg1, arg2) {
var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
try { m += s1.split(".")[1].length } catch (e) { }
try { m += s2.split(".")[1].length } catch (e) { }
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
}
//用法：
//给Number类型增加一个mul方法，调用起来更加方便。
Number.prototype.mul = function (arg) {
return accMul(arg, this);
}
//除法函数，用来得到精确的除法结果
//说明：javascript的除法结果会有误差，在两个浮点数相除的时候会比较明显。这个函数返回较为精确的除法结果。
//调用：accDiv(arg1,arg2)
//返回值：arg1除以arg2的精确结果
function accDiv(arg1, arg2) {
var t1 = 0, t2 = 0, r1, r2;
try { t1 = arg1.toString().split(".")[1].length } catch (e) { }
try { t2 = arg2.toString().split(".")[1].length } catch (e) { }
with (Math) {
r1 = Number(arg1.toString().replace(".", ""))
r2 = Number(arg2.toString().replace(".", ""))
return (r1 / r2) * pow(10, t2 - t1);
}
}
//用法：
//给Number类型增加一个div方法，调用起来更加方便。
JS中toFixed()方法的问题及解决方案
四舍五入失效。
《浮点数精度问题的前世今生？为什么计算机会 丢失小数……》
http://www.zhoulujun.cn/zhoulujun/html/theory/computBase/2016_0714_7860.html
1.335.toFixed(2) // 1.33
重写 toFixed ，有人说重写后的返回值改变了。
http://www.cnblogs.com/gushen/archive/2012/11/20/2778324.html
<html>
<head>
<script type="text/javascript">
Number.prototype.toFixed=function (d) {
var s=this+"";
if(!d)d=0;
if(s.indexOf(".")==-1)s+=".";
s+=new Array(d+1).join("0");
if(new RegExp("^(-|\\+)?(\\d+(\\.\\d{0,"+(d+1)+"})?)\\d*$").test(s)){
var s="0"+RegExp.$2,pm=RegExp.$1,a=RegExp.$3.length,b=true;
if(a==d+2){
a=s.match(/\d/g);
if(parseInt(a[a.length-1])>4){
for(var i=a.length-2;i>=0;i--){
a[i]=parseInt(a[i])+1;
if(a[i]==10){
a[i]=0;
b=i!=1;
}else break;
}
}
s=a.join("").replace(new RegExp("(\\d+)(\\d{"+d+"})\\d$"),"$1.$2"); }if(b)s=s.substr(1);
return (pm+s).replace(/\.$/,"");
}return this+""; };
</script>
</head>
<body>
<input type="button" value="显示0.009.toFixed(2)" onclick="alert(0.009.toFixed(2))"><br />
<input type="button" value="显示0.123.toFixed(2)" onclick="alert(0.123.toFixed(2))"><br />
<input type="button" value="显示0.125.toFixed(2)" onclick="alert(0.125.toFixed(2))"><br />
<input type="button" value="显示0.126.toFixed(2)" onclick="alert(0.126.toFixed(2))"><br />
<input type="button" value="显示20.445.toFixed(2)" onclick="alert(20.445.toFixed(2))"><br />
<input onclick="alert(20.405.toFixed(2))" type="button" value="显示20.405.toFixed(2)"> <br />
<input onclick="alert(20.415.toFixed(2))" type="button" value="显示20.415.toFixed(2)"> <br />
<input onclick="alert(20.425.toFixed(2))" type="button" value="显示20.425.toFixed(2)"> <br />
<input onclick="alert(20.435.toFixed(2))" type="button" value="显示20.435.toFixed(2)"> <br />
<input onclick="alert(20.445.toFixed(2))" type="button" value="显示20.445.toFixed(2)"> <br />
<input onclick="alert(20.455.toFixed(2))" type="button" value="显示20.455.toFixed(2)"> <br />
<input onclick="alert(20.465.toFixed(2))" type="button" value="显示20.465.toFixed(2)"> <br />
<input onclick="alert(20.475.toFixed(2))" type="button" value="显示20.475.toFixed(2)"> <br />
<input onclick="alert(20.485.toFixed(2))" type="button" value="显示20.485.toFixed(2)"> <br />
<input onclick="alert(20.495.toFixed(2))" type="button" value="显示20.495.toFixed(2)"> <br />
<input onclick="alert(0.05.toFixed(1))" type="button" value="显示0.05.toFixed(1)"> <br />
<input onclick="alert(0.15.toFixed(1))" type="button" value="显示0.15.toFixed(1)"> <br />
<input onclick="alert(0.25.toFixed(1))" type="button" value="显示0.25.toFixed(1)"> <br />
<input onclick="alert(0.35.toFixed(1))" type="button" value="显示0.35.toFixed(1)"> <br />
<input onclick="alert(0.45.toFixed(1))" type="button" value="显示0.45.toFixed(1)"> <br />
<input onclick="alert(0.55.toFixed(1))" type="button" value="显示0.55.toFixed(1)"> <br />
<input onclick="alert(0.65.toFixed(1))" type="button" value="显示0.65.toFixed(1)"> <br />
<input onclick="alert(0.75.toFixed(1))" type="button" value="显示0.75.toFixed(1)"> <br />
<input onclick="alert(0.85.toFixed(1))" type="button" value="显示0.85.toFixed(1)"> <br />
<input onclick="alert(0.95.toFixed(1))" type="button" value="显示0.95.toFixed(1)"> <br />
</body>
</html>
下面的文章均来源于网络。
http://blog.csdn.net/forest_fire/article/details/50944339
如果我问你 0.1 + 0.2 等于几？你可能会送我一个白眼，0.1 + 0.2 = 0.3 啊，那还用问吗？连幼儿园的小朋友都会回答这么小儿科的问题了。但是你知道吗，同样的问题放在编程语言中，或许就不是想象中那么简单的事儿了。
不信？我们先来看一段 JS。
var numA = 0.1;
var numB = 0.2;
alert( (numA + numB) === 0.3 );
执行结果是 false。没错，当我第一次看到这段代码时，我也理所当然地以为它是 true，但是执行结果让我大跌眼镜，是我的打开方式不对吗？非也非也。我们再执行以下代码试试就知道结果为什么是 false 了。
var numA = 0.1;
var numB = 0.2;
alert( numA + numB );
原来，0.1 + 0.2 = 0.30000000000000004。是不是很奇葩？其实对于浮点数的四则运算，几乎所有的编程语言都会有类似精度误差的问题，只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题，而 JavaScript 是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出。下面就分析下为什么会有这个精度误差，以及怎样修复这个误差。
首先，我们要站在计算机的角度思考 0.1 + 0.2 这个看似小儿科的问题。我们知道，能被计算机读懂的是二进制，而不是十进制，所以我们先把 0.1 和 0.2 转换成二进制看看：
0.1 => 0.0001 1001 1001 1001…（无限循环）
0.2 => 0.0011 0011 0011 0011…（无限循环）
双精度浮点数的小数部分最多支持 52 位，所以两者相加之后得到这么一串 0.0100110011001100110011001100110011001100110011001100 因浮点数小数位的限制而截断的二进制数字，这时候，我们再把它转换为十进制，就成了 0.30000000000000004。
原来如此，那怎么解决这个问题呢？我想要的结果就是 0.1 + 0.2 === 0.3 啊！！！
有种最简单的解决方案，就是给出明确的精度要求，在返回值的过程中，计算机会自动四舍五入，比如：
var numA = 0.1;
var numB = 0.2;
alert( parseFloat((numA + numB).toFixed(2)) === 0.3 );
但是明显这不是一劳永逸的方法，如果有一个方法能帮我们解决这些浮点数的精度问题，那该多好。我们来试试下面这个方法：
Math.formatFloat = function(f, digit) {
var m = Math.pow(10, digit);
return parseInt(f * m, 10) / m;
}
var numA = 0.1;
var numB = 0.2;
alert(Math.formatFloat(numA + numB, 1) === 0.3);
这个方法是什么意思呢？为了避免产生精度差异，我们要把需要计算的数字乘以 10 的 n 次幂，换算成计算机能够精确识别的整数，然后再除以 10 的 n 次幂，大部分编程语言都是这样处理精度差异的，我们就借用过来处理一下 JS 中的浮点数精度误差。
如果下次再有人问你 0.1 + 0.2 等于几，你可要小心回答咯！！
1.因为计算机只认识二进制，所以某些数字二进制是无限循环的，例如：0.1=> 0.0001 1001 1001 ...无限循环 ，所以产生了精度问题，c这类语言已经封装好方法来避免，然而js并没有，为此带来不少的麻烦，特别是需要频繁计算的项目，出现bug还不容易发现。不扯皮，上解决方案：
1.化零为整
先把小数乘以10的次幂，然后再运算。
0.1+0.2=>((0.1*10)+(0.2*10))/10=>0.3;
当然这只是思路，实际应用还有很多问题，比如要判断有几位小数位，当表达式复杂的时候可阅读性的问题，我的思路是分别写加减乘除四个运算方法，把四个方法放到windwo对象的原型中（不推荐）或者放到某个模块类中；
2.CalcEval.js引擎
不想动脑的福利来了，CalcEval引擎专门解决js精度问题。
引入CalcEval.js
<script src="js/CalcEval.js"></script>
var ce=new CalcEval();//创建引擎对象
var result=ce.eval('0.1+0.2');//注意：表达式必须以字符串的形式传入
我们大家都知道，javascript在计算公式的时候，会出现误差，导致我们本来就应该正确的代码，出现了我们意想不到的结果。
例如:
45.6*13=592.8000000000001(结果应该是592.8);
0.7+0.1=0.7999999999999999(应该是0.8);
//还有N多，在此不一一列举。
网上有一个比较认可的解决方法，就是自己去写加法，减法，乘法，除法。
例如:
// 两个浮点数求和
function accAdd(num1,num2){
var r1,r2,m;
try{
r1 = num1.toString().split('.')[1].length;
}catch(e){
r1 = 0;
}
try{
r2=num2.toString().split(".")[1].length;
}catch(e){
r2=0;
}
m=Math.pow(10,Math.max(r1,r2));
// return (num1*m+num2*m)/m;
return Math.round(num1*m+num2*m)/m;
} // 两个浮点数相减
function accSub(num1,num2){
var r1,r2,m;
try{
r1 = num1.toString().split('.')[1].length;
}catch(e){
r1 = 0;
}
try{
r2=num2.toString().split(".")[1].length;
}catch(e){
r2=0;
}
m=Math.pow(10,Math.max(r1,r2));
n=(r1>=r2)?r1:r2;
return (Math.round(num1*m-num2*m)/m).toFixed(n);
}
// 两数相除
function accDiv(num1,num2){
var t1,t2,r1,r2;
try{
t1 = num1.toString().split('.')[1].length;
}catch(e){
t1 = 0;
}
try{
t2=num2.toString().split(".")[1].length;
}catch(e){
t2=0;
}
r1=Number(num1.toString().replace(".",""));
r2=Number(num2.toString().replace(".",""));
return (r1/r2)*Math.pow(10,t2-t1);
} function accMul(num1,num2){
var m=0,s1=num1.toString(),s2=num2.toString();
try{m+=s1.split(".")[1].length}catch(e){};
try{m+=s2.split(".")[1].length}catch(e){};
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}
但是有的时候，我们需要计算一连串的公式，并且里面包含了括号等等的复杂的符合运算，这个时候咱们应该怎么办呢？
例如:计算(0.7+0.1)÷(45.6*13)
这样的公式，我们是无法通过上面的自定义函数来解决的。因此今天给大家介绍一个比较好的计算引擎。
CalcEval.js
CalcEval引擎是一个专门解决javascript浮点数误差的的引擎，能够完美的解决各种复合的运算，最终输出正确的结果。
使用方法：
第一步:引入CalcEval.js
<script type="text/javascript" src="CalcEval.js"></script>
第二部:在页面上调用CalcEval的解析引擎入口
var ce = new CalcEval();//创建引擎对象
var result = ce.eval("(0.7+0.1)/(45.6*13)");//调用引擎接口来解析公式的字符串,这个地方，必须要将公式以字符串的形式传入。
alert(result);//查看返回结果。
就这么简单的过程，就可以解决了每个浏览器中的浮点数计算bug。同时也可以制作自己的网页计算器了。
js精度误差的更多相关文章
- JS数字计算精度误差的解决方法
本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0. ...
- JS中浮点数精度误差解决
问题出现 0.1 + 0.2 = 0.30000000000000004 问题分析 对于浮点数的四则运算,几乎所有的编程语言都会有类似精度误差的问题,只不过在 C++/C#/Java 这些语言中已经封 ...
- JS 精度问题处理
/除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精确的除法结果. //调用:accDiv(arg1,arg2) ...
- Java浮点数float，bigdecimal和double精确计算的精度误差问题总结
(转)Java浮点数float,bigdecimal和double精确计算的精度误差问题总结 1.float整数计算误差 案例:会员积分字段采用float类型,导致计算会员积分时,7位整数的数据计算结 ...
- JS精度问题,解决方案 math.js
JS精度问题 Vue中使用 解决方案 math.js npm install mathjs import { create, all } from 'mathjs' const config = ...
- js小数计算引起的精度误差问题
我记得刚开始学js的时候学到浮点有举例0.1+0.2 它的计算结果是: 0.1+0.20.30000000000000004 很神奇的一个计算,js是弱语言,在精度上没做处理: 我就自己定义了加减乘除 ...
- 自定义JS乘法运算误差解决！
在实际开发中遇到这样一个乘法公式:数量*单价=总价 像这样的浮点数列子:200*8.2,JS算出的结果是: 像这种浮点数的乘法计算就会有误差,我们需要得到准确的值应该是:1640,与我们后台C#计算结 ...
- js精度问题
JavaScript数字精度丢失问题总结 现象 原因 计算机的二进制实现和位数限制有些数无法有限表示.就像一些无理数不能有限表示,如 圆周率 3.1415926...,1.3333... 等.JS 遵 ...
- JS精度问题（0.1+0.2 = 0.3吗？)
一.引出问题 0.1+0.2 = 0.3吗?在JS中是这样的吗?我们写个测试代码不就知道了吗? 结果出人意料,并不像我们所想象的那样.那么这到底是为什么呢? 二.原因分析 JS浮点数存储机制: 三.解 ...
随机推荐
- 仿照admin实现一个自定义的增删改查的组件
1.首先,创建三个项目,app01,app02,stark,在settings里边记得配置.然后举例:在app01的model里边写表,用的db.sqlite3,所以数据库不用再settings里边配 ...
- react系列笔记1 用npx npm命令创建react app
react系列笔记1 用npx npm命令创建react app create-react-app my-app是开始构建新的 React 单页应用程序的最佳方式.它已经为你设置好了开发环境,以便您可 ...
- 75.Java异常处理机制throws
package testDate; import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IO ...
- linux上限值网速、限值带宽
Linux操作系统中的流量控制器TC(Traffic Control)用于Linux内核的流量控制,主要是通过在输出端口处建立一个队列来实现流量控制. Linux流量控制的基本原理如下图所示. 接收包 ...
- 大数据学习路线：Hadoop集群同步技术分享
今天给大家带来的技术分享是——Hadoop集群同步. 一.同步方式 选择一个机器,作为时间服务器(这里选择hadoop01),所有的机器与这台集群时间进行定时的同步,比如,每隔十分钟,同步一次时间. ...
- mongoose与express
一.mongoose的使用1.先创建一个项目目录,初始化:npm init -y2.创建一个server.js文件,在该目录下安装mongoose:cnpm install mongoose3.引入m ...
- tomcat 启动时遇到org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet contained no TLDs
当发生这样的错误的时候 org.apache.jasper.servlet.TldScanner.scanJars At least one JAR was scanned for TLDs yet ...
- nginx location分析
- Firefox创建firefoxprofile
我们自动化测试的时候,有时不需要图片加载出来,提高浏览器加载速度,从而提高脚本的执行速度.另外在一些网络比较差的环境下,禁用css.图片等加载可以提高访问速度 方法: 1.创建自己的firefoxpr ...
- 运行android模拟器，emulator: ERROR: x86 emulation currently requires hardware acceleration!
运行android模拟器,emulator: ERROR: x86 emulation currently requires hardware acceleration! 问题: 运行android模 ...