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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
JavaScript继承方式实例
Oct 29 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
详解http访问解析流程原理
Oct 18 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 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操作符与控制结构代码
2011/12/30 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
lib.utf.js
2007/08/21 Javascript
javascript options属性集合操作代码
2009/12/28 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
python GUI实例学习
2017/11/21 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
2015年敬老月活动总结
2015/03/27 职场文书
婚育证明样本
2015/06/16 职场文书
数学备课组工作总结
2015/08/12 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python