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 相关文章推荐
自己的js工具 Event封装
Aug 21 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
js中使用使用原型(prototype)定义方法的好处详解
Jul 04 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
jQuery中常用动画效果函数(日常整理)
Sep 17 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 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/04/13 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
JavaScript实现多维数组的方法
2013/11/20 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
python实现超级玛丽游戏
2020/03/18 Python
Python进行统计建模
2020/08/10 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
日本一家专门经营各种箱包的大型网站:Traveler Store
2016/08/03 全球购物
香港化妆品经销商:我的公主
2016/08/05 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
介绍一下linux文件系统分配策略
2012/11/17 面试题
管道维修工岗位职责
2013/12/27 职场文书
班级聚会策划书
2014/01/16 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers