详解js加减乘除精确计算


Posted in Javascript onMarch 19, 2019

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 相关文章推荐
js的event详解。
Sep 06 Javascript
JavaScript入门教程(1) 什么是JS
Jan 31 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
Jun 12 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
Sep 23 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 #jQuery
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 #Javascript
vue多层嵌套路由实例分析
Mar 19 #Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 #Javascript
vue项目移动端实现ip输入框问题
Mar 19 #Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 #Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 #Javascript
You might like
php中实现简单的ACL 完结篇
2011/09/07 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
javascript this用法小结
2008/12/19 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
JavaScript实现控制打开文件另存为对话框的方法
2015/04/17 Javascript
Sea.JS知识总结
2016/05/05 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
使用Javascript简单计算器
2018/11/17 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
js如何验证密码强度
2020/03/18 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
python 性能优化方法小结
2017/03/31 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
毕业设计说明书
2014/05/07 职场文书
干部选拔任用方案
2014/05/26 职场文书
创先争优宣传标语
2014/10/08 职场文书
责任书格式
2015/01/29 职场文书
中学语文教学反思
2016/02/16 职场文书
施工安全协议书
2016/03/22 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python
教你nginx跳转配置的四种方式
2022/07/07 Servers