Detailed explanation of JS floating point number operation processing (graphic tutorial)-JS Tutorial-php.cn

Detailed explanation of JS floating point number operation processing (graphic tutorial)

亚连

Release： 2018-05-19 14:11:20

Original

2431 people have browsed it

This article mainly introduces JS-floating point number operation processing. Now I share it with you and give it as a reference. Interested friends can refer to it.

1. Problem Description

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

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

Copy after login

2. Solution

There will be a small error after JS operation. Unlike .Net or Java is as accurate as that. 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:

Retain the calculation result 2 -3 decimal places. The front-end interface generally uses 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

Copy after login

In order to facilitate the call, we can extract a public method. For example, in the JSMath library below, JSMath rewrites addition, subtraction, multiplication and division. The parameters will be converted to integers before operation JSMath (parameter 1). Operation (parameter 2)

Parameter 1 and parameter 2 are the first Number and the 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) == &#39;object&#39;) && (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(&#39;.&#39;) > 0) {
      timesCount1 = thisValueString.split(&#39;.&#39;)[1].length;
    }
    if (valueString.indexOf(&#39;.&#39;) > 0) {
      timesCount2 = valueString.split(&#39;.&#39;)[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(&#39;.&#39;) > 0) {
      timesCount1 = thisValueString.split(&#39;.&#39;)[1].length;
    }
    if (valueString.indexOf(&#39;.&#39;) > 0) {
      timesCount2 = valueString.split(&#39;.&#39;)[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.p = function(value) {
    var thisValueString = this.value.toString();
    var valueString = value.toString();
    var timesCount1 = 0;
    var timesCount2 = 0;
    if (thisValueString.indexOf(&#39;.&#39;) > 0) {
      timesCount1 = thisValueString.split(&#39;.&#39;)[1].length;
    }
    if (valueString.indexOf(&#39;.&#39;) > 0) {
      timesCount2 = valueString.split(&#39;.&#39;)[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(&#39;.&#39;) > 0) {
      timesCount1 = thisValueString.split(&#39;.&#39;)[1].length;
    }
    if (valueString.indexOf(&#39;.&#39;) > 0) {
      timesCount2 = valueString.split(&#39;.&#39;)[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;
    }
  }
})()

Copy after login

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).p(7).value = 0.8

Copy after login

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)).p(7).value == 0.8

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

JS Concept and usage instructions of anonymous self-executing functions

p5. How to implement and use js mouse interaction

Summary of js parsing data skills

The above is the detailed content of Detailed explanation of JS floating point number operation processing (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!