详谈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 相关文章推荐
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
Jun 26 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
js实现三角形粒子运动
Sep 22 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常用函数的使用汇总
2013/06/08 PHP
提升PHP性能的21种方法介绍
2013/06/25 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
采用call方式实现js继承
2014/05/20 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
意大利在线药房:shop-farmacia.it
2019/03/12 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
英语硕士生求职简历的自我评价
2013/10/15 职场文书
学校个人对照检查材料
2014/08/26 职场文书
民主生活会剖析材料
2014/09/30 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书