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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
没有document.getElementByName方法
Aug 19 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
js实现抽奖效果
Mar 27 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 Javascript
JavaScript实现点击图片换背景
Nov 20 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python实现进程间通信简单实例
2014/07/23 Python
wxPython框架类和面板类的使用实例
2014/09/28 Python
Python定时执行之Timer用法示例
2015/05/27 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
企事业单位求职者的自我评价
2013/12/28 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
社区健康教育实施方案
2014/03/18 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
中专生自荐信
2014/06/25 职场文书
学校运动会报道稿
2014/09/23 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
2014年幼儿园安全工作总结
2014/11/10 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Python天气语音播报小助手
2021/09/25 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python
Win11软件图标固定到任务栏
2022/04/19 数码科技
js作用域及作用域链工作引擎
2022/07/07 Javascript