来源:http://rockyee.iteye.com/blog/891538

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

alert(Number(0.009).toFixed(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,第二个数截取不正确
我们再来看看四则运算的代码:

alert(1/3);//弹出: 0.3333333333333333
alert(0.1 + 0.2);//弹出: 0.30000000000000004
alert(-0.09 - 0.01);//弹出: -0.09999999999999999
alert(0.012345 * 0.000001);//弹出: 1.2344999999999999e-8
alert(0.000001 / 0.0001);//弹出: 0.009999999999999998 

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

alert(Number(1)/Number(3));//弹出: 0.3333333333333333
alert(Number(0.1) + Number(0.2));//弹出: 0.30000000000000004
alert(Number(-0.09) – Number(0.01));//弹出: -0.09999999999999999
alert(Number(0.012345) * Number(0.000001));//弹出: 1.2344999999999999e-8
alert(Number(0.000001) / Number(0.0001));//弹出: 0.009999999999999998 

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

alert(typeof(1));//弹出: number
alert(typeof(1/3));//弹出: number
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):

十进制0.1
=> 二进制0.00011001100110011…(循环0011)
=>尾数为1.1001100110011001100…1100(共52位,除了小数点左边的1),指数为-4(二进制移码为00000000010),符号位为0
=> 计算机存储为:0 00000000100 10011001100110011…11001
=> 因为尾数最多52位,所以实际存储的值为0.00011001100110011001100110011001100110011001100110011001
而十进制0.2
=> 二进制0.0011001100110011…(循环0011)
=>尾数为1.1001100110011001100…1100(共52位,除了小数点左边的1),指数为-3(二进制移码为00000000011),符号位为0
=> 存储为:0 00000000011 10011001100110011…11001
因为尾数最多52位,所以实际存储的值为0.00110011001100110011001100110011001100110011001100110011
那么两者相加得:
0.00011001100110011001100110011001100110011001100110011001
+  0.00110011001100110011001100110011001100110011001100110011
=  0.01001100110011001100110011001100110011001100110011001100
转换成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)就可以了吗?我最初就是这么想的,但后来却发现一些数字运算后实际结果与我们的猜想并不一致。我们来看看这个简单的运算:

alert(512.06*100); 

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

/**
* 左补齐字符串
*
* @param nSize
*            要补齐的长度
* @param ch
*            要补齐的字符
* @return
*/
String.prototype.padLeft = function(nSize, ch)
{
var len = 0;
var s = this ? this : "";
ch = ch ? ch : '0';// 默认补0
len = s.length;
while (len < nSize)
{
s = ch + s;
len++;
}
return s;
}
/**
* 右补齐字符串
*
* @param nSize
*            要补齐的长度
* @param ch
*            要补齐的字符
* @return
*/
String.prototype.padRight = function(nSize, ch)
{
var len = 0;
var s = this ? this : "";
ch = ch ? ch : '0';// 默认补0
len = s.length;
while (len < nSize)
{
s = s + ch;
len++;
}
return s;
}
/**
* 左移小数点位置(用于数学计算,相当于除以Math.pow(10,scale))
*
* @param scale
*            要移位的刻度
* @return
*/
String.prototype.movePointLeft = function(scale)
{
var s, s1, s2, ch, ps, sign;
ch = '.';
sign = '';
s = this ? this : "";
if (scale <= 0) return s;
ps = s.split('.');
s1 = ps[0] ? ps[0] : "";
s2 = ps[1] ? ps[1] : "";
if (s1.slice(0, 1) == '-')
{
s1 = s1.slice(1);
sign = '-';
}
if (s1.length <= scale)
{
ch = "0.";
s1 = s1.padLeft(scale);
}
return sign + s1.slice(0, -scale) + ch + s1.slice(-scale) + s2;
}
/**
* 右移小数点位置(用于数学计算,相当于乘以Math.pow(10,scale))
*
* @param scale
*            要移位的刻度
* @return
*/
String.prototype.movePointRight = function(scale)
{
var s, s1, s2, ch, ps;
ch = '.';
s = this ? this : "";
if (scale <= 0) return s;
ps = s.split('.');
s1 = ps[0] ? ps[0] : "";
s2 = ps[1] ? ps[1] : "";
if (s2.length <= scale)
{
ch = '';
s2 = s2.padRight(scale);
}
return s1 + s2.slice(0, scale) + ch + s2.slice(scale, s2.length);
}
/**
* 移动小数点位置(用于数学计算,相当于(乘以/除以)Math.pow(10,scale))
*
* @param scale
*            要移位的刻度(正数表示向右移;负数表示向左移动;0返回原值)
* @return
*/
String.prototype.movePoint = function(scale)
{
if (scale >= 0)
return this.movePointRight(scale);
else
return this.movePointLeft(-scale);
}

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

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次方)。
代码如下

Number.prototype.toFixed = function(scale)
{
var s, s1, s2, start;
s1 = this + "";
start = s1.indexOf(".");
s = s1.movePoint(scale);
if (start >= 0)
{
s2 = Number(s1.substr(start + scale + 1, 1));
if (s2 >= 5 && this >= 0 || s2 < 5 && this < 0)
{
s = Math.ceil(s);
}
else
{
s = Math.floor(s);
}
}
return s.toString().movePoint(-scale);
}

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

alert(Number(0.009).toFixed(2));//弹出0.01
alert(Number(162.295).toFixed(2));//弹出162.30  

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

Number.prototype.toFixed = function(scale)
{
var s = this + "";
if (!scale) scale = 0;
if (s.indexOf(".") == -1) s += ".";
s += new Array(scale + 1).join("0");
if (new RegExp("^(-|\\+)?(\\d+(\\.\\d{0," + (scale + 1) + "})?)\\d*$").test(s))
{
var s = "0" + RegExp.$2, pm = RegExp.$1, a = RegExp.$3.length, b = true;
if (a == scale + 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{" + scale + "})\\d$"), "$1.$2");
}
if (b) s = s.substr(1);
return (pm + s).replace(/\.$/, "");
}
return this + "";
}

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

function testRound()
{
var dt, dtBegin, dtEnd, i;
dtBegin = new Date();
for (i=0; i<100000; i++)
{
dt = new Date();
Number("0." + dt.getMilliseconds()).toFixed(2);
}
dtEnd = new Date();
alert(dtEnd.getTime()-dtBegin.getTime());
} 

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

javascript 数字精度问题相关推荐

  1. js 单精度浮点数转10进制_确保前端 JavaScript 浮点数精度的四则运算方法

    1 浮点数运算与 IEEE 754 标准 在 JavaScript 中,执行 0.1+0.2,得到的结果却是 0.30000000000000004.这就不得不提到 IEEE 754 标准. IEEE ...

  2. JavaScript数字运算必备库——big.js源码解析

    概述 在我们常见的JavaScript数字运算中,小数和大数都是会让我们比较头疼的两个数据类型. 在大数运算中,由于number类型的数字长度限制,我们经常会遇到超出范围的情况.比如在我们传递Long ...

  3. 28.精讲JavaScript数字类型,你不知道的必考点。

    文章目录 JavaScript数字类型详解 前言 数字的写法 分隔符 省略的0 十六.八.二进制 toString(base) 舍入 精度 偏差 偏差现象 偏差原因 解决方法 Infinity.NaN ...

  4. java数字时钟代码,[Java教程]Javascript 数字时钟

    [Java教程]Javascript 数字时钟 0 2012-10-14 22:00:11 Javascript代码部分: 在body标签中添加以下Html代码: 本文网址:http://www.sh ...

  5. JavaScript 数字转汉字大写 (JS金额大写)

    javascript数字转化为汉字金额大写,可以处理负值 已经封装成类,直接复制使用 本人在项目中使用的,如果好用,请点赞 下面上 代码,最后有使用方法 //数字(数字类型或字符串类型)转化为金额大写 ...

  6. JavaScript 数字与字符串的加减乘除运算

    JavaScript 数字与字符串的加减乘除运 老几次做题懵逼,遇到一大串运算句开始晕哪个打哪个,这次就一次性看透= =,免得再有下一次. JavaScript 数字 number: 数值始终是 64 ...

  7. javascript 数字的常用方法

    Number 是javascript 的基本数据类型,数字,常用的就是获取几位小数点,和把字符串转成数字,下面我们来介绍下number的常用方法 创建数字的方式 let number=99; cons ...

  8. javascript 数字格式化

    对数字进行格式化输出,是非常有意义的一件事情,例如许多时候,我们希望一个数字能够输出为指定格式的字符串,拿25.9878来说,我们可能会希望它能保留两位小数来说出,即结果为25.99,或者对于0.34 ...

  9. php 精度问题怎么解决,JavaScript 中精度问题以及解决方案

    JavaScript 中的数字按照 IEEE 754 的标准,使用 64 位双精度浮点型来表示.其中符号位 S,指数位 E,尾数位M分别占了 1,11,52 位,并且在 ES5 规范 中指出了指数位E ...

最新文章

  1. SPOJ - QTREE5 Query on a tree V 边分治
  2. redhat-problem to be research
  3. python发送qq邮件列表_Python SMTP发送邮件
  4. 什么是1st tier conference?
  5. vue 中slot 的具体用法
  6. leetcode53 Maximum Subarray 最大连续子数组
  7. linux python 信号,Python模块之信号(signal)
  8. 人工智能作业——搜索树博弈树一阶逻辑表达式CNF范式
  9. Helm 3 完整教程(十一):Helm 函数讲解(5)日期函数
  10. Spring MVC-学习笔记(5)spring MVC的文件上传、下载、拦截器
  11. LM324运放作为比较器输出不稳定问题的探讨
  12. 湖南大学高级软件开发过程
  13. 抖音整人/撩小姐姐代码(vbs脚本)
  14. C语言的广泛作用的论文,高职C语言课程教学论文
  15. 使用密钥方式登录阿里云服务器
  16. Batch Normalization + Internal Covariate Shift(论文理解)
  17. 大麦网启动“麦香计划”,将投3亿元布局戏剧内容领域
  18. ggplot2-标度、坐标轴和图例4
  19. java.lang.IllegalArgumentException: DrawerLayout must be measured with MeasureSpec.EXACTLY.
  20. unity3D 移动平台性能优化

热门文章

  1. 互联网优秀架构师必读书单V2.0
  2. 大型网站系统的特点和架构设计
  3. 论文浅尝 | 面向自动问题生成的跨语言训练
  4. 将二维列表输出到excel
  5. WeStrom自定义设置修改快捷键
  6. 设计法则 - 菲茨定律 (转)
  7. python 列表推导式
  8. scala shuffle
  9. JavaScript基本概念(下)
  10. SGU 187 - Twist and whirl -- want to cheat