js小数运算出现多位小数如何解决


Posted in Javascript onOctober 08, 2015

和大家分享一个有趣的测试:

0.1+0.2 == 0.3 //false
顿时郁闷,好吧!原来0.1+0.2变成:0.30000000000000004
再来一个 2.4/0.8 =>2.9999999999999996 没办法换种方式,都转换成整数 (2.4 * 100)/(0.8 * 100)
10.22 现在要减去 0.11 结果值又出现了很多的小数 10.110000000000001,然后我就用了 toFixed 方法来过滤小数,但是不知道跟前面那种转换成整数后再执行哪种效率高,好!还是试下再说吧!

var date1 = new Date();
for(var i = 0; i < 10000; i++){
 var result1 = (10.22 - 0.11).toFixed(2);    
}
alert(new Date() - date1);//效率低
  
var date2 = new Date();
for(var j = 0; j < 10000; j++){
 var result2 = (10.22 * 1000 - 0.11 * 1000) / 1000;    
}
alert(new Date() - date2);//效率高
 
alert(0.1 + 0.2 == 0.3); //既然返回false
alert(0.1 + 0.2); //既然返回0.30000000000000004
alert(parseFloat(0.1) + parseFloat(0.2)); //还是返回0.30000000000000004

查了一些资料,一是 JavaScript 浮点数计算的 Bug,另一个是和计算机最终转换成二进制计算有关系,但是为什么不是所有小数都会有这种现象,目前我也不清楚,有时间再去深入研究一下。

解决方法:
解决这种问题两种方法,第一种就是利用JavaScript 的toFixed(n) 方法,直接获取N 位小数,不过,个人觉得这种方法在数据精度上会有一些问题。如果数据精度要求不高的话可以使用。

alert((0.1 + 0.2).toFixed(1));

第二种方法就是自己编写运算方法。以下是自定义加法函数,使用此方法进行相加会避免上面问题。

//自定义加法运算
function addNum (num1, num2) {
 var sq1,sq2,m;
 try {
  sq1 = num1.toString().split(".")[1].length;
 }
 catch (e) {
  sq1 = 0;
 }
 try {
  sq2 = num2.toString().split(".")[1].length;
 }
 catch (e) {
  sq2 = 0;
 }
 m = Math.pow(10,Math.max(sq1, sq2));
 return (num1 * m + num2 * m) / m;
}
alert(addNum(0.1, 0.2));

当然,简单一点也可以写成:alert((num * 3 + 10 * 3) /3); 这样也不会出现 N 多位小数。
alert((num * 3 + 10 * 3) /3); 与 alert(num + 10); 这两种写法计算机在底层转换成二进制运算是有区别的,或许这就是出现上述问题的原因,还有待我们去深入研究,大家可以多多讨论。

Javascript 相关文章推荐
在html页面上拖放移动标签
Jan 08 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
jquery实现简单拖拽效果
Jul 20 jQuery
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 #Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 #Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 #Javascript
Javascript控制div属性动态变化实例分析
Oct 08 #Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 #Javascript
分享五个有用的jquery小技巧
Oct 08 #Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 #Javascript
You might like
PHP 各种排序算法实现代码
2009/08/20 PHP
浅析PHP的ASCII码转换类
2013/07/05 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
Yii框架安装简明教程
2020/05/15 PHP
js操作二级联动实现代码
2010/07/27 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
JS封装通过className获取元素的函数示例
2016/12/20 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
python3爬取各类天气信息
2018/02/24 Python
python爬虫之模拟登陆csdn的实例代码
2018/05/18 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Numpy数组的广播机制的实现
2020/11/03 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
素质拓展感言
2014/01/29 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技