详谈javascript精度问题与调整


Posted in Javascript onJuly 08, 2017

一个经典的问题:

0.1+0.2==0.3

答案是:false

因为:0.1+0.2=0.30000000000000004

第一次看到这个结果就是无比惊讶,下巴碰到地上,得深入了解下问题出在哪里,该怎么去调整。

产生问题的原因

在JS中数值类型就只有number类型,没有int,float,double之分,number类型实际上存储的就是IEEE754标准的浮点数,计算规则也是。

在表达式计算前,先要按照标准将两个数转成浮点数。

IEEE 754规定:

1.32位的浮点数(单精度),最高的1位是符号位S,接着的8位是指数E,剩下的23位为有效数字M。

浮点数的表现形式:

x=(-1)^S*m*2^(e+127)

m=1.M

E=e+127

2.64位的浮点数(双精度),最高的1位是符号位S,接着的11位是指数E,剩下的52位为有效数字M。

浮点数的表现形式:

x=(-1)^S*m*2^(e+1023)

m=1.M

E=e+1023

我们就按照双精度浮点数的标准转一下看看。

首先按照规则将0.1转成二进制的浮点数。

0.1*2=0.2 //0
0.2*2=0.4 //00
0.4*2=0.8 //000
0.8*2=1.6 //0001
0.6*2=1.2 //00011
0.2*2=0.4 //000110
0.4*2=0.8 //0001100
0.8*2=1.6 //00011001
0.6*2=1.2 //000110011
0.2*2=0.4 //0001100110
0.4*2=0.8 //00011001100
0.8*2=1.6 //000110011001
0.6*2=1.2 //0001100110011
0.2*2=0.4 //00011001100110
0.4*2=0.8 //000110011001100
0.8*2=1.6 //0001100110011001
0.6*2=1.2 //00011001100110011
//省略

在转换中,会发现小数位的二进制值在不停的重复,转换没完没了了,因为乘不尽啊,不是10的倍数。

转换也不可能一直重复下去,按照标准规格化的要求凑满。

转换结果:

0.00011001100110011001100110011001100110011001100110011001

精度问题产生的第一个原因就在这里诞生了,按照标准算出来的二进制浮点数并不能都精确的表示一个小数,只是无限近似,0.5可以,因为5是10的倍数,转出来的小数位二进制不会重复。

我们看看再转回小数会怎么样,按照公式写成:

0*2^-1 + 0*2^-2 + 0*2^-3 + 1*2^-4 + 1*2^-5 + 0*2^-6 + 0*2^-7 + 1*2^-8 + 1*2^-9 + 0*2^-10 + 0*2^-11 + 1*2^-12 + 1*2^-13 + 0*2^-14 + 0*2^-15 + 1*2^-16 + 1*2^-17 + 0*2^-18 + 0*2^-19 + 1*2^-20 + 1*2^-21 + 0*2^-22 + 0*2^-23 + 1*2^-24 + 1*2^-25 + 0*2^-26 + 0*2^-27 + 1*2^-28 + 1*2^-29 + 0*2^-30 + 0*2^-31 + 1*2^-32 + 1*2^-33 + 0*2^-34 + 0*2^-35 + 1*2^-36 + 1*2^-37 + 0*2^-38 + 0*2^-39 + 1*2^-40 + 1*2^-41 + 0*2^-42 + 0*2^-43 + 1*2^-44 + 1*2^-45 + 0*2^-46 + 0*2^-47 + 1*2^-48 + 1*2^-49 + 0*2^-50 + 0*2^-51 + 1*2^-52 + 1*2^-53 + 0*2^-54 + 0*2^-55 + 1*2^-56

计算结果:

0.09999999999999999167332731531133

精度就在这里丢了一次。就是转换成小数位的二进制的时候。

按照表现形式的要求,要写成x=(-1)^s*m*2^(e+1023),m=1.M的格式,按照要求尾数m的左边最高位总是1,所以要上面小数二进制结果的小数点进行移动

移动前:

0.00011001100110011001100110011001100110011001100110011001

移动后:

1.1001100110011001100110011001100110011001100110011001*2^-4

小数点右边选取要求的52位,上面的结果因为是提前算好,所以就省略了截取工作。

因为小数点最左侧的最高位总是1,所以它是不用存储的,那么虽然存储的是52位,但实际上可以表示53位的浮点数。

S=0,E=-4+1023=1019,m=1.M=1.1001100110011001100110011001100110011001100110011001,M=1001100110011001100110011001100110011001100110011001

浮点数表示:

x=-1^0*1.1001100110011001100110011001100110011001100110011001*2^1019

浮点数存储值(最高的1位是符号位S,接着的11位是指数E,剩下的52位为有效数字M):

0 ‭001111111011‬ 1001100110011001100110011001100110011001100110011001

同理0.2的IEEE754的转换后的结果:

浮点数表示:

-1^0*1.1001100110011001100110011001100110011001100110011001*2^1020

浮点数存储值(最高的1位是符号位S,接着的11位是指数E,剩下的52位为有效数字M):

0 ‭001111111100‬ 1001100110011001100110011001100110011001100110011001

接下来,按照IEEE754的加法规则,运算过程为:

1.0操作数的检查。

2.比较阶码大小并对阶。

3.尾数进行加法运算。

4.结果规格化。

5.舍入处理。

6.溢出处理。

按照计算过程,结果规格化、舍入处理、溢出处理都会遭成精度问题。

总结来看,造成精度问题的环节:

1.小数向二进制转换。

2.运算过程中的规格化,舍入、溢出处理。

精度调整

两种方法可以进行调整。

1.使用toFixed函数对小数位进行四舍五入。

但是其返回值是字符串,其参数是0 ~ 20之间的值,需要注意。

(0.1+0.2).toFixed(1) // '0.3'

2.无小数运算,运算结果附上小数点

使用该方法,要注意因为要变成整数再计算,对于一个小数点后位数很多的数来运算的时候,要注意溢出。

//加
function add(arg1,arg2){ 
 var digits1,digits2,maxDigits; 
 try{digits1=arg1.toString().split(".")[1].length}catch(e){digits1=0} 
 try{digits2=arg2.toString().split(".")[1].length}catch(e){digits2=0} 
 maxDigits=Math.pow(10,Math.max(digits1,digits2)) 
 return (arg1*maxDigits+arg2*maxDigits)/maxDigits 
} 
 
//减
function sub(arg1,arg2){ 
 var digits1,digits2,maxDigits; 
 try{digits1=arg1.toString().split(".")[1].length}catch(e){digits1=0} 
 try{digits2=arg2.toString().split(".")[1].length}catch(e){digits2=0} 
 maxDigits=Math.pow(10,Math.max(digits1,digits2)); 
 return (arg1*maxDigits-arg2*maxDigits)/maxDigits; 
} 

//乘
function mul(arg1,arg2) { 
 var digits=0,s1=arg1.toString(),s2=arg2.toString(); 
 try{digits+=s1.split(".")[1].length}catch(e){} 
 try{digits+=s2.split(".")[1].length}catch(e){}
 return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,digits); 
}

//除
function div(arg1,arg2){ 
 var int1=0,int2=0,digits1,digits2; 
 try{digits1=arg1.toString().split(".")[1].length}catch(e){digits1=0} 
 try{digits2=arg2.toString().split(".")[1].length}catch(e){digits2=0} 
 
 int1=Number(arg1.toString().replace(".","")) 
 int2=Number(arg2.toString().replace(".","")) 
 return (int1/int2)*Math.pow(10,digits2-digits1); 

}

以上这篇详谈javascript精度问题与调整就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
防止登录页面出现在frame中js代码
Jul 22 Javascript
JavaScript Promise启示录
Aug 12 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
Apr 26 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
javascript定时器取消定时器及优化方法
Jul 08 #Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 #Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 #jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 #jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 #jQuery
js中变量的连续赋值(实例讲解)
Jul 08 #Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 #Javascript
You might like
PHP无敌近乎加密方式!
2010/07/17 PHP
PHP冒泡排序算法代码详细解读
2011/07/17 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
Jquery post传递数组方法实现思路及代码
2013/04/28 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
Prototype框架详解
2015/11/25 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
js实现车辆管理系统
2020/08/26 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python中模块string.py详解
2017/03/12 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
2014社区三八妇女节活动方案
2014/03/30 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
质量保证书怎么写
2015/02/27 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL