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 相关文章推荐
基于jquery的表头固定的若干方法
Jan 27 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
node.js中的fs.rename方法使用说明
Dec 16 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
javascript中onclick(this)用法介绍
2013/04/19 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
原生js制作简单的数字键盘
2015/04/24 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
jquery 手势密码插件
2017/03/17 Javascript
5 种JavaScript编码规范
2018/01/30 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
简单了解python中对象的取反运算符
2019/07/01 Python
Django中的用户身份验证示例详解
2019/08/07 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Django REST 异常处理详解
2020/07/15 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
美国羊皮公司:Overland
2018/01/15 全球购物
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
音乐教学案例
2014/01/30 职场文书
黄石寨导游词
2015/02/05 职场文书
城管年度个人总结
2015/02/28 职场文书
自荐信怎么写
2015/03/04 职场文书
计划生育责任书
2015/05/09 职场文书
导游词之江南周庄
2019/12/06 职场文书
什么是SOLID
2022/03/24 Javascript
Spring Security使用单点登录的权限功能
2022/04/03 Java/Android