Detailed explanation of JS-floating point number operation processing

1. Problem description

I am working on a project recently. There will be some JS floating point calculations on the page. I found that there are some bugs in JS floating point calculations. For example:

0.1+0.2 == 0.30000000000000004
  
0.1 + 0.7 == 0.7999999999999999
  
7*0.8 == 5.6000000000000005
  
5.6/7 == 0.7999999999999999

2. Solution

There will be many problems after JS calculations Small error. Not as accurate as .Net or Java. The main reason is that the focus of JS is not on calculations, but sometimes projects must use it. After thinking about it, there are probably two solutions

A Solution 1:

Keep the calculation results 2-3 decimal places. Front-end interfaces generally use fewer operations. The accuracy requirements are not too high. So just take 2 decimal places.

B. Option 2:

Convert the number of decimal places to integer operations. For example:

0.1+0.2 =》　(1+2)/10 == 0.3
  
0.1 + 0.7 =》 (1+7)/10 == 0.8
  
7*0.8 == (7*8)/10 == 5.6
  
5.6/7 == (56/7)/10 == 0.1

For the convenience of calling. So we can extract a public method. For example, the following JSMath library, JSMath rewrites addition, subtraction, multiplication and division . The parameters will be converted to integers first and then JSMath (parameter 1) is calculated. Operation (parameter 2)

Parameter 1 and parameter 2 are the first Number and second Number of the operation respectively. After calculation, the value is obtained through the Value attribute.

(function() {
  
  var JSMath = function() {
    return this;
  }
  
  JSMath.prototype.from = function(value) {
  
    // 支持JSMath参数传递主要是用于嵌套的调用
    if ((typeof(value) == 'object') && (value.value != undefined)) {
      this.value = value.value;
    } else {
      this.value = value;
    }
    return this;
  }
  
　 // 加法
  JSMath.prototype.add = function(value) {
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = (Math.pow(10, maxtimeCount) * this.value + Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
    return this;
  }
　　　
　// 减法
  JSMath.prototype.sub = function(value) {
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = (Math.pow(10, maxtimeCount) * this.value - Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount);
    return this;
  }
  
  // 除法　　
  JSMath.prototype.div = function(value) {
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = ((Math.pow(10, maxtimeCount) * this.value) / (Math.pow(10, maxtimeCount) * value));
    return this;
  }
  
　 // 乘法
  JSMath.prototype.times = function(value) {
  
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf('.') > 0) {
      timesCount1 = thisValueString.split('.')[1].length;
    }
    if (valueString.indexOf('.') > 0) {
      timesCount2 = valueString.split('.')[1].length;
    }
    var maxtimeCount = timesCount1 > timesCount2 ? timesCount1 : timesCount2;
    this.value = (Math.pow(10, maxtimeCount) * this.value * Math.pow(10, maxtimeCount) * value) / Math.pow(10, maxtimeCount * 2);
    return this;
  }
  
  if (window.JSMath == undefined) {
    window.JSMath = function(value) {
      var result = new JSMath();
      result.from(value);
      return result;
    }
  }
})()

B1. Basic operations

  0.1+0.2
=> JSMath(0.1).add(0.2).value == 0.3
  
7+0.8
=> JSMath(7).times(0.8).value == 5.6
  
5.6/7
=> JSMath(5.6).div(7).value = 0.8

B2. Multi-object operations

  0.05 + 0.05 + 0.2
=> JSMath(JSMath(0.05).add(0.05)).add(0.2).value == 0.3
  
(5+0.6)/7
=> JSMath(JSMath(5).add(0.6)).div(7).value == 0.8

3. Small summary

Some solutions that I know for the time being. It's not clear whether there are more reliable open source third-party libraries to solve this problem.