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分页脚本
May 21 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 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
中国收音机工业发展史
2021/03/02 无线电
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
2013/10/16 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
全面解析Javascript无限添加QQ好友原理
2016/06/15 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
bootstrap响应式工具使用详解
2017/11/29 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
Python读写unicode文件的方法
2015/07/10 Python
Python对象类型及其运算方法(详解)
2017/07/05 Python
对python多线程与global变量详解
2018/11/09 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
餐饮投资计划书
2014/04/25 职场文书
三严三实对照检查材料
2014/09/22 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
婚礼家长致辞
2015/07/27 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL