详解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 相关文章推荐
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jQuery中extend函数详解
Feb 13 Javascript
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
Vue js with语句原理及用法解析
Sep 03 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中使用反射技术的架构插件使用说明
2010/05/18 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
JavaScript实现区块链
2018/03/14 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
python海龟绘图实例教程
2014/07/24 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
pandas 选择某几列的方法
2018/07/03 Python
python3 读取Excel表格中的数据
2018/10/16 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
《问银河》教学反思
2014/02/19 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
员工团队活动方案
2014/08/28 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
小学工作总结2015
2015/05/04 职场文书
婚育证明样本
2015/06/16 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书