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 相关文章推荐
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
JavaScript获取/更改文本框的值的实例代码
Aug 02 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
Dec 12 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
ionic 3.0+ 项目搭建运行环境的教程
Aug 09 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
Vue cli3 库模式搭建组件库并发布到 npm的流程
Oct 12 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
js实现电灯开关效果
Jan 19 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动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
jquery 输入框数字限制插件
2009/11/10 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
js获取域名的方法
2015/01/27 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
JS实现读取xml内容并输出到div中的方法示例
2018/04/19 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
Python实现统计代码行的方法分析
2017/07/12 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python list和str互转的实现示例
2020/11/16 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
大学生会计职业生涯规划范文
2014/02/28 职场文书
股权转让意向书
2014/04/01 职场文书
食品安全工作方案
2014/05/07 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
医学生求职自荐书
2014/06/12 职场文书
宣传活动总结范文
2014/07/01 职场文书
校本研修个人总结
2015/02/28 职场文书
兴趣班停课通知
2015/04/24 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
react国际化react-intl的使用
2021/05/06 Javascript