JS浮点计算的问题以及处理

在使用浮点计算的时候明明1.56+0.07=1.63，小学生都会算的，可是计算机为什么算出来很长一段数字呢？

因为JavaScript 里的数字是采用 IEEE 754 标准的 64 位双精度浮点数。该规范定义了浮点数的格式。

不说话直接上代码看看：

<div>
  数字1:<input id="input1" name=""> 
</div>
<div>
  数字2:<input id="input2" name="">
</div>
<div>
  <button id="add">+</button>
  <button id="minus">-</button>
  <button id="multiply">*</button>
  <button id="division">\</button>
</div>
  <div id="result">value</div>

  let input1 = document.getElementById('input1');
  let input2 = document.getElementById('input2');
  let btn1 = document.getElementById('add');
  let btn2 = document.getElementById('minus');
  let btn3 = document.getElementById('multiply');
  let btn4 = document.getElementById('division');
  let result = document.getElementById('result');
  //加
  btn1.onclick = function () {
    let ss = parseFloat(input1.value) + parseFloat(input2.value);
    result.innerHTML = ss;
  }
   //减
  btn2.onclick = function () {
    let ss = parseFloat(input1.value) - parseFloat(input2.value);
    result.innerHTML = ss;
  }
  //乘
  btn3.onclick = function () {
    let ss = parseFloat(input1.value) * parseFloat(input2.value);
    result.innerHTML = ss;
  }
  //除
  btn4.onclick = function () {
    let ss = parseFloat(input1.value) / parseFloat(input2.value);
    result.innerHTML = ss;
  }

运行一下加法看看结果~~~

处理方法

重新写了一些浮点运算的函数或直接扩大倍数运算。

下面以扩大倍数运算举例子：【原理把小数变成整数，然后做运算处理，再除以放大倍数】

//修改之后的加法
  function Add(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 Minus(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 Multiply(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 Division(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) { }
    with (Math) {
      r1 = Number(arg1.toString().replace(".", ""))
      r2 = Number(arg2.toString().replace(".", ""))
      return (r1 / r2) * pow(10, t2 - t1);
    }
  }

这种方式虽然解决部分问题，但是还是无法解决小数点过长的时候。当小数点后多过7位基本上计算出来都会失去精度。

解决方案可以引入库：bignumber

<script src="https://cdn.bootcdn.net/ajax/libs/bignumber.js/9.0.1/bignumber.js"></script>
<script>
const xx = new BigNumber('123456859.456156165196161');
console.log(xx.div(1.2).toString);
</script>