程序博客网 > 汽车竞猜源码

关于JavaScript中计算精度丢失的问题（一）

来源：互联网 发布：汽车竞猜源码 编辑：程序博客网 时间：2024/05/21 01:28

转贴:http://rockyee.iteye.com/blog/891538

 

摘要：
由于计算机是用二进制来存储和处理数字，不能精确表示浮点数，而JavaScript中没有相应的封装类来处理浮点数运算，直接计算会导致运算精度丢失。
为了避免产生精度差异，把需要计算的数字升级（乘以10的n次幂）成计算机能够精确识别的整数，等计算完毕再降级（除以10的n次幂），这是大部分编程语言处理精度差异的通用方法。
关键词：
计算精度 四舍五入 四则运算 精度丢失
1. 疑惑
我们知道，几乎每种编程语言都提供了适合货币计算的类。例如C#提供了decimal，Java提供了BigDecimal，JavaScript提供了Number……
由于之前用decimal和BigDecimal用得很好，没有产生过精度问题，所以一直没有怀疑过JavaScript的Number类型，以为可以直接使用Number类型进行计算。但是直接使用是有问题的。
我们先看看四舍五入的如下代码：

Js代码 复制代码 收藏代码
  1. alert(Number(0.009).toFixed(2));   
  2. alert(Number(162.295).toFixed(2));  


按正常结果，应该分别弹出0.01和162.30。但实际测试结果却是在不同浏览器中得到的是不同的结果：
在ie6、7、8下得到0.00和162.30，第一个数截取不正确；
在firefox中得到0.01和162.29，第二个数截取不正确；
在opera下得到0.01和162.29，第二个数截取不正确
我们再来看看四则运算的代码：

Js代码 复制代码 收藏代码
  1. alert(1/3);//弹出: 0.3333333333333333   
  2. alert(0.1 + 0.2);//弹出: 0.30000000000000004    
  3. alert(-0.09 - 0.01);//弹出: -0.09999999999999999   
  4. alert(0.012345 * 0.000001);//弹出: 1.2344999999999999e-8   
  5. alert(0.000001 / 0.0001);//弹出: 0.009999999999999998  


按正常结果，除第一行外(因为其本身就不能除尽)，其他都应该要得到精确的结果，从弹出的结果我们却发现不是我们想要的正确结果。是因为没有转换成Number类型吗？我们转换成Number后再计算看看：

Js代码 复制代码 收藏代码
  1. alert(Number(1)/Number(3));//弹出: 0.3333333333333333        
  2. alert(Number(0.1) + Number(0.2));//弹出: 0.30000000000000004       
  3. alert(Number(-0.09) – Number(0.01));//弹出: -0.09999999999999999      
  4. alert(Number(0.012345) * Number(0.000001));//弹出: 1.2344999999999999e-8      
  5. alert(Number(0.000001) / Number(0.0001));//弹出: 0.009999999999999998  


还是一样的结果，看来javascript默认把数字识别为number类型。为了验证这一点，我们用typeof弹出类型看看：

Js代码 复制代码 收藏代码
  1. alert(typeof(1));//弹出: number   
  2. alert(typeof(1/3));//弹出: number   
  3. alert(typeof(-0.09999999));//弹出: number  


2. 原因
为什么会产生这种精度丢失的问题呢？是javascript语言的bug吗？
我们回忆一下大学时学过的计算机原理，计算机执行的是二进制算术，当十进制数不能准确转换为二进制数时，这种精度误差就在所难免。
再查查javascript的相关资料，我们知道javascript中的数字都是用浮点数表示的，并规定使用IEEE 754 标准的双精度浮点数表示：
IEEE 754 规定了两种基本浮点格式：单精度和双精度。
　 IEEE单精度格式具有24 位有效数字精度(包含符号号)，并总共占用32 位。
　 IEEE双精度格式具有53 位有效数字精度(包含符号号)，并总共占用64 位。
这种结构是一种科学表示法，用符号（正或负）、指数和尾数来表示，底数被确定为2，也就是说是把一个浮点数表示为尾数乘以2的指数次方再加上符号。下面来看一下具体的规格:

        符号位         指数位         小数部分 指数偏移量单精度浮点数 1位（31） 8位（30-23） 23位（22-00） 127双精度浮点数 1位（63） 11位（62-52） 52位（51-00） 1023


我们以单精度浮点数来说明：
指数是8位，可表达的范围是0到255
而对应的实际的指数是－127到＋128
这里特殊说明，－127和＋128这两个数据在IEEE当中是保留的用作多种用途的
－127表示的数字是0
128和其他位数组合表示多种意义，最典型的就是NAN状态。
知道了这些，我们来模拟计算机的进制转换的计算，就找一个简单的0.1+0.2来推演吧(引用自http://blog.csdn.net/xujiaxuliang/archive/2010/10/13/5939573.aspx)：

Java代码 复制代码 收藏代码
  1. 十进制0.1     
  2.  => 二进制0.00011001100110011…(循环0011)      
  3.  =>尾数为1.1001100110011001100…1100（共52位，除了小数点左边的1），指数为-4（二进制移码为00000000010）,符号位为0     
  4.  => 计算机存储为：0 00000000100 10011001100110011…11001     
  5.  => 因为尾数最多52位，所以实际存储的值为0.00011001100110011001100110011001100110011001100110011001     
  6.  而十进制0.2     
  7.  => 二进制0.0011001100110011…(循环0011)     
  8.  =>尾数为1.1001100110011001100…1100（共52位，除了小数点左边的1），指数为-3（二进制移码为00000000011）,符号位为0     
  9.  => 存储为：0 00000000011 10011001100110011…11001     
  10.  因为尾数最多52位，所以实际存储的值为0.00110011001100110011001100110011001100110011001100110011     
  11. 　那么两者相加得：         
  12. 　0.00011001100110011001100110011001100110011001100110011001     
  13. +  0.00110011001100110011001100110011001100110011001100110011  
  14.  =  0.01001100110011001100110011001100110011001100110011001100     
  15.  转换成10进制之后得到:0.30000000000000004  


从上述的推演过程我们知道，这种误差是难免的，c#的decimal和Java的BigDecimal之所以没有出现精度差异，只是因为在其内部作了相应处理，把这种精度差异给屏蔽掉了，而javascript是一种弱类型的脚本语言，本身并没有对计算精度做相应的处理，这就需要我们另外想办法处理了。
3. 解决办法
3.1 升级降级
从上文我们已经知道，javascript中产生精度差异的原因是计算机无法精确表示浮点数，连自身都不能精确，运算起来就更加得不到精确的结果了。那么怎么让计算机精确认识要计算的数呢？
我们知道十进制的整数和二进制是可以互相进行精确转换的，那么我们把浮点数升级（乘以10的n次幂）成计算机能够精确识别的整数来计算，计算完毕之后再降级（除以10的n次幂），不就得到精确的结果了吗？好，就这么办！
我们知道，Math.pow(10,scale)可以得到10的scale次方，那么就把浮点数直接乘以Math.pow(10,scale)就可以了吗？我最初就是这么想的，但后来却发现一些数字运算后实际结果与我们的猜想并不一致。我们来看看这个简单的运算：

Js代码 复制代码 收藏代码
  1. alert(512.06*100);  


按常理应该返回51206，但实际结果却是51205.99999999999。奇怪吧？其实也不奇怪，这是因为浮点数不能精确参与乘法运算，即使这个运算很特殊（只是乘以10的scale次方进行升级）。如此我们就不能直接乘以10的scale次方进行升级，那就让我们自己来挪动小数点吧。
怎么挪动小数点肯定大家是各有妙招，此处附上我写的几个方法：

Js代码 复制代码 收藏代码
  1. /**  
  2.  * 左补齐字符串  
  3.  *   
  4.  * @param nSize  
  5.  *            要补齐的长度  
  6.  * @param ch  
  7.  *            要补齐的字符  
  8.  * @return  
  9.  */  
  10. String.prototype.padLeft = function(nSize, ch)   
  11. {   
  12.     var len = 0;   
  13.     var s = this ? this : "";   
  14.     ch = ch ? ch : '0';// 默认补0   
  15.   
  16.     len = s.length;   
  17.     while (len < nSize)   
  18.     {   
  19.         s = ch + s;   
  20.         len++;   
  21.     }   
  22.     return s;   
  23. }   
  24.   
  25. /**  
  26.  * 右补齐字符串  
  27.  *   
  28.  * @param nSize  
  29.  *            要补齐的长度  
  30.  * @param ch  
  31.  *            要补齐的字符  
  32.  * @return  
  33.  */  
  34. String.prototype.padRight = function(nSize, ch)   
  35. {   
  36.     var len = 0;   
  37.     var s = this ? this : "";   
  38.     ch = ch ? ch : '0';// 默认补0   
  39.   
  40.     len = s.length;   
  41.     while (len < nSize)   
  42.     {   
  43.         s = s + ch;   
  44.         len++;   
  45.     }   
  46.     return s;   
  47. }   
  48. /**  
  49.  * 左移小数点位置（用于数学计算，相当于除以Math.pow(10,scale)）  
  50.  *   
  51.  * @param scale  
  52.  *            要移位的刻度  
  53.  * @return  
  54.  */  
  55. String.prototype.movePointLeft = function(scale)   
  56. {   
  57.     var s, s1, s2, ch, ps, sign;   
  58.     ch = '.';   
  59.     sign = '';   
  60.     s = this ? this : "";   
  61.   
  62.     if (scale <= 0) return s;   
  63.     ps = s.split('.');   
  64.     s1 = ps[0] ? ps[0] : "";   
  65.     s2 = ps[1] ? ps[1] : "";   
  66.     if (s1.slice(0, 1) == '-')   
  67.     {   
  68.         s1 = s1.slice(1);   
  69.         sign = '-';   
  70.     }   
  71.     if (s1.length <= scale)   
  72.     {   
  73.         ch = "0.";   
  74.         s1 = s1.padLeft(scale);   
  75.     }   
  76.     return sign + s1.slice(0, -scale) + ch + s1.slice(-scale) + s2;   
  77. }   
  78. /**  
  79.  * 右移小数点位置（用于数学计算，相当于乘以Math.pow(10,scale)）  
  80.  *   
  81.  * @param scale  
  82.  *            要移位的刻度  
  83.  * @return  
  84.  */  
  85. String.prototype.movePointRight = function(scale)   
  86. {   
  87.     var s, s1, s2, ch, ps;   
  88.     ch = '.';   
  89.     s = this ? this : "";   
  90.   
  91.     if (scale <= 0) return s;   
  92.     ps = s.split('.');   
  93.     s1 = ps[0] ? ps[0] : "";   
  94.     s2 = ps[1] ? ps[1] : "";   
  95.     if (s2.length <= scale)   
  96.     {   
  97.         ch = '';   
  98.         s2 = s2.padRight(scale);   
  99.     }   
  100.     return s1 + s2.slice(0, scale) + ch + s2.slice(scale, s2.length);   
  101. }   
  102. /**  
  103.  * 移动小数点位置（用于数学计算，相当于（乘以/除以）Math.pow(10,scale)）  
  104.  *   
  105.  * @param scale  
  106.  *            要移位的刻度（正数表示向右移；负数表示向左移动；0返回原值）  
  107.  * @return  
  108.  */  
  109. String.prototype.movePoint = function(scale)   
  110. {   
  111.     if (scale >= 0)   
  112.         return this.movePointRight(scale);   
  113.     else  
  114.         return this.movePointLeft(-scale);   
  115. }  


这样我们升级降级都可以转换成字符串后调用String对象的自定义方法movePoint了，乘以10的scale次方我们传正整数scale，除以10的scale次方我们传负整数-scale。
再来看看我们之前升级512.06的代码，采用自定义方法的调用代码变成这样：

Js代码 复制代码 收藏代码
  1. alert(512.06.toString().movePoint(2)); //弹出: 51206  


这样直接挪动小数点就不怕它不听话出现一长串数字了(*^__^*)。 当然，movePoint方法得到的结果是字符串，如果要转成Number类型也很方便（怎么转就不再废话了）。
3.2 四舍五入
好，有了升级降级的基础，我们来看看四舍五入的方法，由于不同浏览器对Number的toFixed方法有不同的支持，我们需要用自己的方法去覆盖浏览器的默认实现。
有一个简单的办法是我们自己来判断要截取数据的后一位是否大于等于5，然后进行舍或者入。我们知道Math.ceil方法是取大于等于指定数的最小整数，Math.floor方法是取小于等于指定数的最大整数，于是我们可以利用这两个方法来进行舍入处理，先将要进行舍入的数升级要舍入的位数scale（乘以10的scale次方），进行ceil或floor取整后，再降级要舍入的位数scale（除以10的scale次方）。
代码如下：

Js代码 复制代码 收藏代码
  1. Number.prototype.toFixed = function(scale)   
  2. {   
  3.     var s, s1, s2, start;   
  4.   
  5.     s1 = this + "";   
  6.     start = s1.indexOf(".");   
  7.     s = s1.movePoint(scale);   
  8.   
  9.     if (start >= 0)   
  10.     {   
  11.         s2 = Number(s1.substr(start + scale + 1, 1));   
  12.         if (s2 >= 5 && this >= 0 || s2 < 5 && this < 0)   
  13.         {   
  14.             s = Math.ceil(s);   
  15.         }   
  16.         else  
  17.         {   
  18.             s = Math.floor(s);   
  19.         }   
  20.     }   
  21.   
  22.     return s.toString().movePoint(-scale);   
  23. }  


覆盖Number类型的toFixed方法后，我们再来执行以下方法

Js代码 复制代码 收藏代码
  1. alert(Number(0.009).toFixed(2));//弹出0.01   
  2. alert(Number(162.295).toFixed(2));//弹出162.30  


在ie6、7、8、firefox、Opera下分别进行验证，都能得到相应的正确的结果。
另一种方式是在网上找到的采用正则表达式来进行四舍五入，代码如下：

Js代码 复制代码 收藏代码
  1. Number.prototype.toFixed = function(scale)   
  2. {   
  3.     var s = this + "";   
  4.     if (!scale) scale = 0;   
  5.     if (s.indexOf(".") == -1) s += ".";   
  6.     s += new Array(scale + 1).join("0");   
  7.     if (new RegExp("^(-|//+)?(//d+(//.//d{0," + (scale + 1) + "})?)//d*$").test(s))   
  8.     {   
  9.         var s = "0" + RegExp.$2, pm = RegExp.$1, a = RegExp.$3.length, b = true;   
  10.         if (a == scale + 2)   
  11.         {   
  12.             a = s.match(//d/g);   
  13.             if (parseInt(a[a.length - 1]) > 4)   
  14.             {   
  15.                 for (var i = a.length - 2; i >= 0; i--)   
  16.                 {   
  17.                     a[i] = parseInt(a[i]) + 1;   
  18.                     if (a[i] == 10)   
  19.                     {   
  20.                         a[i] = 0;   
  21.                         b = i != 1;   
  22.                     }   
  23.                     else  
  24.                         break;   
  25.                 }   
  26.             }   
  27.             s = a.join("").replace(new RegExp("(//d+)(//d{" + scale + "})//d$"), "$1.$2");   
  28.         }   
  29.         if (b) s = s.substr(1);   
  30.         return (pm + s).replace(//.$/, "");   
  31.     }   
  32.     return this + "";   
  33. }  


经验证，这两个方法都能够进行准确的四舍五入，那么采用哪个方法好呢？实践出真知，我们写一个简单的方法来验证一下两种方式的性能：

Js代码 复制代码 收藏代码
  1. function testRound()   
  2. {   
  3.     var dt, dtBegin, dtEnd, i;   
  4.     dtBegin = new Date();   
  5.     for (i=0; i<100000; i++)   
  6.     {   
  7.         dt = new Date();   
  8.         Number("0." + dt.getMilliseconds()).toFixed(2);   
  9.     }   
  10.     dtEnd = new Date();   
  11.     alert(dtEnd.getTime()-dtBegin.getTime());   
  12. }  


为了避免对同一个数字进行四舍五入运算有缓存问题，我们取当前毫秒数进行四舍五入。经验证，在同一台机器上运算10万次的情况下，用movePoint方法，平均耗时2500毫秒；用正则表达式方法，平均耗时4000毫秒。

汽车竞猜源码 汽车竞猜源码
原创粉丝点击
热门IT博客
linux清屏命令快捷键linux清屏命令快捷键
js计算两点之间的距离js计算两点之间的距离
淘宝兼职刷客是真的吗
java 发布到docker
一贯道 知乎
nginx的特点
网络电视看电视台软件
网易聊天软件
淘宝被投诉知识产权3天
linux禅道安装与配置
文件上传阿里云oss2
windows命令行常用命令
虚拟linux系统
高精度电子罗盘软件
都匀浪人网络
mysql substring函数
手机游戏java通用版
java大型开源真实项目
网络招嫖判刑多久
淘宝联盟pid获取
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 早上流鼻涕 小孩流清鼻涕咳嗽怎么办 感冒 流鼻涕 上火流鼻涕 小孩总流鼻涕 鼻涕特别多 流鼻涕后咳嗽 喉咙痛流鼻涕是什么感冒 感冒不流鼻涕 感冒总流鼻涕怎么办 早晨流鼻涕 流清鼻涕打喷嚏是什么感冒 突然流鼻涕 流鼻涕头痛 感冒了流鼻涕 小孩流浓鼻涕 流眼泪流鼻涕 流鼻涕原因 鼻炎流鼻涕吗 感冒流鼻涕头疼 突然感冒流鼻涕 流鼻涕干咳 流鼻涕出血 感冒流鼻涕咽喉痛 孕妇感冒流鼻涕 咳嗽流鼻涕有痰 流鼻涕 咳嗽 流鼻涕的原因 流鼻涕是 总是流鼻涕 流鼻涕严重 着凉流鼻涕 新生儿咳嗽鼻塞怎么办 咳嗽鼻塞吃什么药 婴儿鼻塞咳嗽怎么办 咳嗽宝宝怎么办 感冒怎么办速效办法 两岁宝宝咳嗽流鼻涕 幼儿感冒咳嗽流鼻涕 为什么感冒会流鼻涕 宝宝有点咳嗽流鼻涕怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里