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 定义function的三种方式小结
Oct 16 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 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
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
2011/11/14 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
使用异步controller与jQuery实现卷帘式分页
2019/06/18 jQuery
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
2019/08/20 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
在python 中split()使用多符号分割的例子
2019/07/15 Python
python switch 实现多分支选择功能
2020/12/21 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
养殖行业的创业计划书
2014/01/05 职场文书
协议书怎么写
2014/04/21 职场文书
取保候审保证书
2014/04/30 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
会计求职自荐信
2014/06/20 职场文书
学校爱国卫生月活动总结
2014/06/25 职场文书
车间主任岗位职责
2015/02/03 职场文书
民政工作个人总结
2015/02/28 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
领导干部学习心得体会
2016/01/23 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫