详解js加减乘除精确计算

 更新时间:2019年03月19日 10:29:22   作者:thelongmarch  
这篇文章主要介绍了js加减乘除精确计算,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

JS无法进行精确计算的bug

在做CRM,二代审核需求审核详情页面时。需要按比例(后端传类似0.8的小数)把用户输入的数字显示在不同的地方。
在做dubheInvest = invest * (1 - ratio);运算时发现问题。具体如下:
示例代码:

console.log( 1 - 0.8 ); //输出 0.19999999999999996 
console.log( 6 * 0.7 ); //输出 4.199999999999999 
console.log( 0.1 + 0.2 ); //输出 0.30000000000000004 
console.log( 0.1 + 0.7 ); //输出 0.7999999999999999 
console.log( 1.2 / 0.2 ); //输出 5.999999999999999 

通过上面举出的例子可以看到,原生的js运算结果不一定准确,会丢失精度。

解决方案

解决方案的原理是,将浮点数乘以(扩大)10的n次方倍,把浮点数变为整数后再进行相应的运算,最后将得到的结果除以(缩小)10的n次方倍。

原理示例:

将console.log(1-0.8);  变为 console.log((1 * 10 - 0.8 * 10) / 10); 即可得到正确的值
根据上述原理,可以封装一些方法出来解决此类问题。如下所示(Math.pow(x, y);表示求x的y次方):

//加 
function floatAdd(arg1,arg2){ 
  var r1,r2,m; 
  try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
  try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
  m=Math.pow(10,Math.max(r1,r2)); 
  return (arg1*m+arg2*m)/m; 
} 
  
//减 
function floatSub(arg1,arg2){ 
 var r1,r2,m,n; 
 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} 
 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} 
 m=Math.pow(10,Math.max(r1,r2)); 
 //动态控制精度长度 
 n=(r1>=r2)?r1:r2; 
 return ((arg1*m-arg2*m)/m).toFixed(n); 
} 
  
//乘 
function floatMul(arg1,arg2) { 
 var m=0,s1=arg1.toString(),s2=arg2.toString(); 
 try{m+=s1.split(".")[1].length}catch(e){} 
 try{m+=s2.split(".")[1].length}catch(e){} 
 return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m); 
} 
  
  
//除 
function floatDiv(arg1,arg2){ 
  var t1=0,t2=0,r1,r2; 
  try{t1=arg1.toString().split(".")[1].length}catch(e){} 
  try{t2=arg2.toString().split(".")[1].length}catch(e){} 
   
  r1=Number(arg1.toString().replace(".","")); 
 
  r2=Number(arg2.toString().replace(".","")); 
  return (r1/r2)*Math.pow(10,t2-t1); 
} 

以上所述是小编给大家介绍的js加减乘除精确计算详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JavaScript入门之事件、cookie、定时等

    JavaScript入门之事件、cookie、定时等

    本文从上一篇文章结束的地方开始,解释其他的一些基本的JavaScript语言概念,继续为初学者提供对语言的基础理解
    2011-10-10
  • Javascript实例教程(19) 使用HoTMetal(5)

    Javascript实例教程(19) 使用HoTMetal(5)

    Javascript实例教程(19) 使用HoTMetal(5)...
    2006-12-12
  • 探讨JavaScript中的Rest参数和参数默认值

    探讨JavaScript中的Rest参数和参数默认值

    这篇文章的主要介绍了JavaScript中的Rest参数和参数默认值,内容很充实,需要了解的朋友可以参考下
    2015-07-07
  • JS中Object.assign方法的使用

    JS中Object.assign方法的使用

    这篇文章介绍了JS中Object.assign方法的使用方式,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • JavaScript高级程序设计(第3版)学习笔记 概述

    JavaScript高级程序设计(第3版)学习笔记 概述

    在JavaScript面世之初,没有人会想到它会被应用的如此广泛,也远比一般人想象中的要复杂强大的多,在我自己学习的过程中,曾经有过多次震撼
    2012-10-10
  • JS中使用DOM来控制HTML元素

    JS中使用DOM来控制HTML元素

    这篇文章主要介绍了JS中使用DOM来控制HTML元素的相关资料,需要的朋友可以参考下
    2016-07-07
  • 关于JavaScript中string 的replace

    关于JavaScript中string 的replace

    在使用JavaScript对字符串进行处理的时候我们经常会用到replace方法,很简单的一个方法,以前一直不以为意,直到今天看JavaScript语言精粹的时候读到了一个有趣的小例子的时候,并不是十分理解,了解了一下replace的用法才明白,原来replace不像想象中的那么简单
    2013-04-04
  • 原生js实现获取form表单数据代码实例

    原生js实现获取form表单数据代码实例

    这篇文章主要介绍了原生js实现获取form表单数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • a标签的href与onclick事件的区别详解

    a标签的href与onclick事件的区别详解

    对于a标签的href与onclick事件,大家都经常见到,也经常使用,可它们有什么区别呢?下面就让小编来给大家详细介绍下,感兴趣的朋友可以学习下,不用谢了,哈哈
    2014-11-11
  • 传智播客学习之JavaScript基础篇

    传智播客学习之JavaScript基础篇

    前几天学习了JavaScript,但是一直由于忙碌的原因,没有来得及进行总结,今天终于有时间进行一个全面总结了,希望给正在努力学习的朋友们一点小小帮助。
    2009-11-11

最新评论