javascript避免数字计算精度误差的方法详解

 更新时间:2014年03月05日 09:57:45   作者:  
本篇文章主要是对javascript避免数字计算精度误差的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

如果我问你 0.1 + 0.2 等于几?你可能会送我一个白眼,0.1 + 0.2 = 0.3 啊,那还用问吗?连幼儿园的小朋友都会回答这么小儿科的问题了。但是你知道吗,同样的问题放在编程语言中,或许就不是想象中那么简单的事儿了。
不信?我们先来看一段 JS。

var numA = 0.1;
var numB = 0.2;
alert( (numA + numB) === 0.3 );

执行结果是 false。没错,当我第一次看到这段代码时,我也理所当然地以为它是 true,但是执行结果让我大跌眼镜,是我的打开方式不对吗?非也非也。我们再执行以下代码试试就知道结果为什么是 false 了。

var numA = 0.1;
var numB = 0.2;
alert( numA + numB );

原来,0.1 + 0.2 = 0.30000000000000004。是不是很奇葩?其实对于浮点数的四则运算,几乎所有的编程语言都会有类似精度误差的问题,只不过在 C++/C#/Java 这些语言中已经封装好了方法来避免精度的问题,而 JavaScript 是一门弱类型的语言,从设计思想上就没有对浮点数有个严格的数据类型,所以精度误差的问题就显得格外突出。下面就分析下为什么会有这个精度误差,以及怎样修复这个误差。

首先,我们要站在计算机的角度思考 0.1 + 0.2 这个看似小儿科的问题。我们知道,能被计算机读懂的是二进制,而不是十进制,所以我们先把 0.1 和 0.2 转换成二进制看看:

0.1 => 0.0001 1001 1001 1001…(无限循环)
0.2 => 0.0011 0011 0011 0011…(无限循环)

双精度浮点数的小数部分最多支持 52 位,所以两者相加之后得到这么一串 0.0100110011001100110011001100110011001100110011001100 因浮点数小数位的限制而截断的二进制数字,这时候,我们再把它转换为十进制,就成了 0.30000000000000004。

原来如此,那怎么解决这个问题呢?我想要的结果就是 0.1 + 0.2 === 0.3 啊!!!

有种最简单的解决方案,就是给出明确的精度要求,在返回值的过程中,计算机会自动四舍五入,比如:

var numA = 0.1;
var numB = 0.2;
alert( parseFloat((numA + numB).toFixed(2)) === 0.3 );

但是明显这不是一劳永逸的方法,如果有一个方法能帮我们解决这些浮点数的精度问题,那该多好。我们来试试下面这个方法:

Math.formatFloat = function(f, digit) {
    var m = Math.pow(10, digit);
    return parseInt(f * m, 10) / m;
}

var numA = 0.1;
var numB = 0.2;

alert(Math.formatFloat(numA + numB, 1) === 0.3);

这个方法是什么意思呢?为了避免产生精度差异,我们要把需要计算的数字乘以 10 的 n 次幂,换算成计算机能够精确识别的整数,然后再除以 10 的 n 次幂,大部分编程语言都是这样处理精度差异的,我们就借用过来处理一下 JS 中的浮点数精度误差。

如果下次再有人问你 0.1 + 0.2 等于几,你可要小心回答咯!!

相关文章

  • 详谈JS中数组的迭代方法和归并方法

    详谈JS中数组的迭代方法和归并方法

    下面小编就为大家带来一篇详谈JS中数组的迭代方法和归并方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JSON遍历方式实例总结

    JSON遍历方式实例总结

    这篇文章主要介绍了JSON遍历方式,结合实例形式总结分析了JavaScript操作json实现遍历的常用技巧,并给出了实例总结,需要的朋友可以参考下
    2015-12-12
  • JavaScript鼠标禁止右键禁止打开控制台及键盘禁用

    JavaScript鼠标禁止右键禁止打开控制台及键盘禁用

    这篇文章主要给大家介绍了关于JavaScript鼠标禁止右键禁止打开控制台及键盘禁用的相关资料,实现禁止右键和禁止打开控制台是一种常见的网页保护技巧,可以防止非法复制、盗取网页资源等安全问题,需要的朋友可以参考下
    2023-10-10
  • js 解析 JSON 数据简单示例

    js 解析 JSON 数据简单示例

    这篇文章主要介绍了js 解析 JSON 数据的方法,结合简单实例形式分析了js 解析 JSON 格式数据的相关操作技巧与注意事项,需要的朋友可以参考下
    2020-04-04
  • JS二进制流文件下载导出(接口返回二进制流)乱码处理方法

    JS二进制流文件下载导出(接口返回二进制流)乱码处理方法

    这篇文章主要介绍了JS二进制流文件下载导出(接口返回二进制流)乱码处理方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • js中的this作用域全解析

    js中的this作用域全解析

    这篇文章主要介绍了js中的this作用域全解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • javascript实现非常简单的小数取整功能示例

    javascript实现非常简单的小数取整功能示例

    这篇文章主要介绍了javascript实现非常简单的小数取整功能,结合具体实例形式分析了javascript数学运算取整相关操作技巧,需要的朋友可以参考下
    2017-06-06
  • 让低版本浏览器支持input的placeholder属性(js方法)

    让低版本浏览器支持input的placeholder属性(js方法)

    低版本浏览器一般都不会支持input的placeholder属性,接下来使用js实现下,感兴趣的朋友可以参考下哈
    2013-04-04
  • JS+CSS实现动态时钟

    JS+CSS实现动态时钟

    这篇文章主要为大家详细介绍了JS+CSS实现动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • MC Dialog js弹出层 完美兼容多浏览器(5.6更新)

    MC Dialog js弹出层 完美兼容多浏览器(5.6更新)

    MC.Dialog 是由肖毅(YesSky) 开发一款界面绚丽美观 操作简单易用的一款js弹出层 MC.Dialog 是经过严格了测试的 兼容目前ie7+ 以及其他非ie核心的浏览器 完美模拟浏览器自带对话框功能
    2010-05-05

最新评论