详解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加减乘除精确计算详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 超级简易的JS计算器实例讲解(实现加减乘除)

    废话不多说,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> body{ margin: 0; } .tab{ border: 3px solid black ; border-radius: 2px; border-collapse:collapse; width: 268p

  • js精确的加减乘除实例

    实例如下: (function () { var calc = { /* 函数,加法函数,用来得到精确的加法结果 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. 参数:arg1:第一个加数:arg2第二个加数:d要保留的小数位数(可以不传此参数,如果不传则不处理小数位数) 调用:Calc.Add(arg1,arg2,d) 返回值:两数相加的结果 */ Add: function (arg1, arg2) { arg1 = arg1

  • JS实现的加减乘除四则运算计算器示例

    JS实现的加减乘除四则运算计算器示例

    本文实例讲述了JS实现超级简易的加减乘除四则运算计算器.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简单的计算器(www.jb51.net)</title> <style> body{ margin: 0; } .tab{ border: 3px solid

  • javascript解决小数的加减乘除精度丢失的方案

    javascript解决小数的加减乘除精度丢失的方案

    原因:js按照2进制来处理小数的加减乘除,在arg1的基础上 将arg2的精度进行扩展或逆扩展匹配,所以会出现如下情况. javascript(js)的小数点加减乘除问题,是一个js的bug如0.3*1 = 0.2999999999等,下面列出可以完美求出相应精度的四种js算法 function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} t

  • html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除)

    html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

  • javascript加减乘除的简单实例

    javascript加减乘除的简单实例 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <script language="javascript" type="text/javascript"> //除法函数 function accD

  • js加减乘除丢失精度问题解决方法

    在javascript中,当你使用小数进行加减乘除运算时,你会发现,所得到的结果有时后面带有长长的一段小数,使运算变得复杂,并且影响计算结果.上网查询了一下原因,大致如下:在javascript中,带小数的数据运算时总会出现好多位小数.这是因为在javascript中浮点数的计算是以2进制计算的. 复制代码 代码如下: /** * 加法运算,避免数据相加小数点后产生多位数和计算精度损失. * * @param num1加数1 | num2加数2 */ function numAdd(num1,

  • 详解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 );

  • 详解JS数值Number类型

    Number 问题 下面的问题你都能回答对了吗? 0.1 + 0.2 == 0.3 成立吗? .e-5 表示多少? 怎么表示8进制? 怎么转换进制? 如何将字符串转换成数值或整数?反过来呢?十六进制又怎么处理? parseInt(0x12, 16) 的返回值是多少?是0x12吗? Number.MAX_VALUE 为最大数值,(new Number(12)).MAX_VALUE 是多少? JavaScript中怎么进行四舍五入?如果保留3位小数的精度? 如何获取一个随机数?如何取整?如何向上取整

  • 详解JS函数防抖

    一.什么是函数防抖 概念:函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间. 举个栗子,坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒.在上述例子中,电梯在检测到有人进入 10 秒钟之后,才会关闭电梯门开始运行,因此,"函数防抖"的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动

  • js加减乘除精确运算方法实例代码

    前言 因为计算机数字是浮点型,所以在计算过程中通常得到的并不是一个准确的数据,所以在做一些数组运算的时候比较头疼,我们这里就来写一下精确运算的方法 首先是加法 (这里以两个数据相加为例) function add(arg1, arg2) { arg1 = arg1.toString(), arg2 = arg2.toString(); // 将传入的数据转化为字符串 var arg1Arr = arg1.split("."), // 将小数的数据从小数点的位置拆开 arg2Arr =

  • 详解JS中的compose函数和pipe函数用法

    compose函数 compose函数可以将需要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数.我们考虑一个简单的需求:这个需求很简单,直接一个计算函数就行: const calculate = x => (x + 10) * 10; let res = calculate(10); console.log(res); // 200 但是根据我们之前讲的函数式编程,我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤,于是我们拆出了一个加法函数和一个乘法函数: cons

  • 详解JS变量存储深拷贝和浅拷贝

    详解JS变量存储深拷贝和浅拷贝

    变量类型与存储空间 栈内存和堆内存 基本数据类型 string.number.null.undefined.boolean.symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值 基本数据类型不存在拷贝,好比如说你无法修改数值1的值 引用类型 Object Function RegExp Math Date 值为对象,存放在堆内存中 在栈内存中变量保存的是一个指针,指向对应在堆内存中的地址. 当访问引用类型的时候,要先从栈中取出该对象的地址指针,然后再从堆内存中取得所需的数据

  • 详解JS中的对象字面量

    前言 在 ES6 之前,js中的对象字面量(也称为对象初始化器)是非常基础的.可以定义两种类型的属性: 键值对{name1: value1} 获取器{ get name(){..} }和 设置器{ set name(val){..}}的计算属性值 var myObject = { myString: 'value 1', get myNumber() { return this._myNumber; }, set myNumber(value) { this._myNumber = Number

  • 详解JS ES6编码规范

    1.块级作用域 1.1.let取代var ES6 提出了两个新的声明变量的命令: let 和const.其中,let可以完全取代var,因为两者语义相同,而且let没有副作用. var命令存在变量提升的特性,而let没有这个命令. 所谓变量提升,即指变量可以先使用,再声明,显然,这种编码规范非常不适合阅读. 1.2.全局常量和线程安全 在let和const之间,优先使用const. let应出现在单线程模块代码内,而const则非常适合多线程. // bad var a = 1, b = 2,

  • 深入详解JS函数的柯里化

    一.补充知识点之函数的隐式转换 来一个简单的思考题. function fn() { return 20; } console.log(fn + 10); // 输出结果是多少? 稍微修改一下,再想想输出结果会是什么? function fn() { return 20; } fn.toString = function() { return 10; } console.log(fn + 10); // 输出结果是多少? 还可以继续修改一下. function fn() { return 20;

  • 实例详解JS中的事件循环机制

    实例详解JS中的事件循环机制

    目录 一.前言 二.宏.微任务 三.Tick 执行顺序 四.案例详解 1.掺杂setTimeout 2.掺杂微任务,此处主要是Promise.then 3.掺杂async/await 一.前言 之前我们把react相关钩子函数大致介绍了一遍,这一系列完结之后我莫名感到空虚,不知道接下来应该更新有关哪方面的文章.最近想了想,打算先回归一遍JS基础,把一些比较重要的基础知识点回顾一下,然后继续撸框架(可能是源码.也可能补全下全家桶).不积跬步无以至千里,万丈高楼咱们先从JS的事件循环机制开始吧,废话

随机推荐