详解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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
Vue中的transition封装组件的实现方法
Aug 13 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实现智能文件类型检测的实现代码
2011/08/02 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
jQuery 获取、设置HTML或TEXT内容的两种方法
2014/05/23 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python实现最速下降法
2020/03/24 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
python自定义函数def的应用详解
2020/06/03 Python
Python基于Faker假数据构造库
2020/11/30 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
女大学生自我鉴定
2013/12/09 职场文书
法制宣传教育方案
2014/05/09 职场文书
2015年大学生实习评语
2015/03/25 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
中国合伙人观后感
2015/06/02 职场文书
青涩记忆观后感
2015/06/18 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
数据设计之权限的实现
2022/08/05 MySQL