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 相关文章推荐
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
Dec 27 Javascript
关于JS管理作用域的问题
Apr 10 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
javascript实现连续赋值
Aug 10 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
js canvas实现写字动画效果
Nov 30 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 Javascript
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
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
试用php中oci8扩展
2015/06/18 PHP
PHP中的访问修饰符简单比较
2019/02/02 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
pyramid配置session的方法教程
2013/11/27 Python
Python函数式编程指南(四):生成器详解
2015/06/24 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
django2 快速安装指南分享
2018/01/05 Python
Python读取视频的两种方法(imageio和cv2)
2018/04/15 Python
Python-接口开发入门解析
2019/08/01 Python
Python continue语句实例用法
2020/02/06 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
应届毕业生求职信
2013/11/30 职场文书
管道维修工岗位职责
2013/12/27 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
晚会开场白和结束语
2015/05/29 职场文书
单位证明范文
2015/06/18 职场文书
企业愿景口号
2015/12/25 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis