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 相关文章推荐
javascript在一段文字中的光标处插入其他文字
Aug 26 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
Prototype RegExp对象 学习
Jul 19 Javascript
基于jquery用于查询操作的实现代码
May 10 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
在node中如何使用 ES6
2017/04/22 Javascript
微信小程序--组件(swiper)详细介绍
2017/06/13 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
layui的table单击行勾选checkbox功能方法
2018/08/14 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
shell的种类有哪些
2015/04/15 面试题
业务代表的岗位职责
2013/11/16 职场文书
学生干部培训方案
2014/06/12 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
个人先进材料范文
2014/12/30 职场文书
市场营销计划书范文
2015/01/16 职场文书
财产保全担保书
2015/01/20 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
股东协议书范本2016
2016/03/21 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS