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 Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
jquery选择符快速提取web表单数据示例
Mar 27 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
javascript的理解及经典案例分析
May 20 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
vue实现标签云效果的方法详解
Aug 28 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
Vue路由 重定向和别名的区别说明
Sep 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
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP回调函数概念与用法实例分析
2017/11/03 PHP
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
Python实现Linux下守护进程的编写方法
2014/08/22 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
python实现打砖块游戏
2020/02/25 Python
Python加速程序运行的方法
2020/07/29 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
2018/06/12 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
母亲节感恩寄语
2014/02/21 职场文书
贷款委托书范本
2014/04/08 职场文书
食品销售计划书
2014/04/26 职场文书
学术诚信承诺书
2014/05/26 职场文书
学校节能减排方案
2014/06/13 职场文书
ktv好的活动方案
2014/08/15 职场文书
业务员岗位职责范本
2015/04/03 职场文书
十大最强岩石系宝可梦,怪颚龙实力最强,第七破坏力很强
2022/03/18 日漫
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python