解决js计算精度异常问题,常用于结算页面总价计算

489 阅读1分钟

在我们写购物车或者下单结算页面,会将用户选中的商品和数量计算取得总价,常规做法就是将总价toFixed(2)一下,保留小数点后两位,但其实这个数值,由于js历史遗留问题,并不准确,所以我们想使用toFixed方法,那就需要重写下原生的toFixed方法,代码如下

Number.prototype.toFixed = function(n) {
  if (n > 20 || n < 0) {
    throw new RangeError("toFixed() digits argument must be between 0 and 20");
  }  
const number = this;
  if (isNaN(number) || number >= Math.pow(10, 21)) {
    return number.toString();
  }
  if (typeof n == "undefined" || n == 0) {
    return Math.round(number).toString();
  }
  let result = number.toString();
  const arr = result.split(".");
  // 整数的情况 
 if (arr.length < 2) {
    result += ".";
    for (let i = 0; i < n; i += 1) {
      result += "0";
    }
    return result;
  }
  const integer = arr[0];
  const decimal = arr[1];
  if (decimal.length == n) {
    return result;
  }
  if (decimal.length < n) {
    for (let i = 0; i < n - decimal.length; i += 1) {
      result += "0";
    }
    return result;
  }
  result = integer + "." + decimal.substr(0, n);
  const last = decimal.substr(n, 1);
  // 四舍五入,转换为整数再处理,避免浮点数精度的损失
  if (parseInt(last, 10) >= 5) {
    const x = Math.pow(10, n);
    result = (Math.round(parseFloat(result) * x) + 1) / x;
    result = result.toFixed(n);
  }
  return Number(result);};

将上面这段代码,放置在全局功能页面就行,比如vue的main.js,这样计算出来的值,如果不放心,可以和计算器算出来的值核对下了