Javascript 浮点运算精度问题分析与解决

 更新时间:2014年03月26日 11:46:11   作者:  
浮点数的精度问题不是JavaScript特有的,因为有些小数以二进制表示位数是无穷的

分析

JavaScript 只有一种数字类型 Number ,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的。 浮点数的精度问题不是JavaScript特有的,因为有些小数以二进制表示位数是无穷的:

十进制           二进制
0.1              0.0001 1001 1001 1001 ...
0.2              0.0011 0011 0011 0011 ...
0.3              0.0100 1100 1100 1100 ...
0.4              0.0110 0110 0110 0110 ...
0.5              0.1
0.6              0.1001 1001 1001 1001 ...

所以比如 1.1 ,其程序实际上无法真正的表示 ‘1.1',而只能做到一定程度上的准确,这是无法避免的精度丢失:

1.09999999999999999

在JavaScript中问题还要复杂些,这里只给一些在Chrome中测试数据:

 输入               输出
1.0-0.9 == 0.1     False
1.0-0.8 == 0.2     False
1.0-0.7 == 0.3     False
1.0-0.6 == 0.4     True
1.0-0.5 == 0.5     True
1.0-0.4 == 0.6     True
1.0-0.3 == 0.7     True
1.0-0.2 == 0.8     True
1.0-0.1 == 0.9     True

解决

那如何来避免这类 1.0-0.9 != 0.1 的非bug型问题发生呢?下面给出一种目前用的比较多的解决方案, 在判断浮点运算结果前对计算结果进行精度缩小,因为在精度缩小的过程总会自动四舍五入:

复制代码 代码如下:

(1.0-0.9).toFixed(digits)                   // toFixed() 精度参数须在 0 与20 之间
parseFloat((1.0-0.9).toFixed(10)) === 0.1   // 结果为True
parseFloat((1.0-0.8).toFixed(10)) === 0.2   // 结果为True
parseFloat((1.0-0.7).toFixed(10)) === 0.3   // 结果为True
parseFloat((11.0-11.8).toFixed(10)) === -0.8   // 结果为True

方法提炼
复制代码 代码如下:

// 通过isEqual工具方法判断数值是否相等
function isEqual(number1, number2, digits){
 digits = digits == undefined? 10: digits; // 默认精度为10
 return number1.toFixed(digits) === number2.toFixed(digits);
}

isEqual(1.0-0.7, 0.3);  // return true

// 原生扩展方式,更喜欢面向对象的风格
Number.prototype.isEqual = function(number, digits){
 digits = digits == undefined? 10: digits; // 默认精度为10
 return this.toFixed(digits) === number.toFixed(digits);
}

(1.0-0.7).isEqual(0.3); // return true

相关文章

  • JS根据变量保存方法名并执行方法示例

    JS根据变量保存方法名并执行方法示例

    用eval方法,把传进来的这个方法名所代表的方法当作一个对象来赋值给method1的func属性,需要的朋友可以参考下
    2014-04-04
  • 仿google adsense颜色选择器代码,从中易广告联盟程序提取

    仿google adsense颜色选择器代码,从中易广告联盟程序提取

    仿google adsense颜色选择器代码,从中易广告联盟程序提取...
    2007-11-11
  • 让图片跳跃起来  javascript图片轮播特效

    让图片跳跃起来 javascript图片轮播特效

    让图片跳跃起来 这篇文章主要介绍了javascript图片轮播特效,图片按照间隔时间进行切换,文章具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 通过微信公众平台获取公众号文章的方法示例

    通过微信公众平台获取公众号文章的方法示例

    这篇文章主要介绍了通过微信公众平台获取公众号文章的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 简单实现js无缝滚动效果

    简单实现js无缝滚动效果

    这篇文章主要教大家如何简单实现js无缝滚动效果,js轮播图实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • p5.js入门教程之图片加载

    p5.js入门教程之图片加载

    这篇文章主要介绍了p5.js入门教程之图片加载,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 微信小程序实现简单搜索框

    微信小程序实现简单搜索框

    这篇文章主要为大家详细介绍了微信小程序实现简单搜索框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 5分钟快速搭建vue3+ts+vite+pinia项目

    5分钟快速搭建vue3+ts+vite+pinia项目

    本文主要介绍了5分钟快速搭建vue3+ts+vite+pinia项目,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • JS实现将对象转化为数组的方法分析

    JS实现将对象转化为数组的方法分析

    这篇文章主要介绍了JS实现将对象转化为数组的方法,结合实例形式分析了javascript操作及转换json数组相关实现技巧,需要的朋友可以参考下
    2019-01-01
  • js中如何对json数组进行排序

    js中如何对json数组进行排序

    这篇文章主要介绍了js中如何对json数组进行排序的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论