详解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操作图片(增,删,改) 例子
Apr 17 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
Spring Boot/VUE中路由传递参数的实现代码
Mar 02 Javascript
微信小程序排坑指南详解
May 23 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
express异步函数异常捕获示例详解
Nov 30 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 读取文件头判断文件类型的实现代码
2013/08/05 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
javascript 清除输入框中的数据
2009/04/13 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python实现socket端口重定向示例
2014/02/10 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python工厂函数用法实例分析
2018/05/14 Python
Python生成短uuid的方法实例详解
2018/05/29 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
获奖的大学生创业计划书
2014/01/05 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
骨干教师事迹材料
2014/12/17 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
delete in子查询不走索引问题分析
2022/07/07 MySQL