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

摘要： 
由于计算机是用二进制来存储和处理数字，不能精确表示浮点数，而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毫秒。 

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

posted @ 2017-01-19 11:09  shown  阅读(643)  评论(0)  编辑  收藏  举报