toFixed精度丢失问题

博客指出JavaScript中10.3950 * 3935.00用toFixed(2)计算结果有误,实际应为40904.33,却得到40904.32。并给出两种解决办法,即在main.js中复制相应代码。

bug说明:
在这里插入图片描述

10.3950 * 3935.00 用toFixed(2) 得到的是40904.32 实际应该是40904.33

解决的方法:
第一种:

在main.js中直接复制下面代码即可

Number.prototype.toFixed = function (n) {
  n = n || 0
  let resNum = Math.round((this * Math.pow(10, n + 1)) / 10) / Math.pow(10, n)
  let resNumString = resNum.toString()
  let dotIndex = resNumString.indexOf('.')
  if (dotIndex < 0 && n > 0) {
    dotIndex = resNumString.length
    resNumString += '.'
  }
  while (resNumString.length <= dotIndex + n) {
    resNumString += '0'
  }
  return resNumString
}

第二种:
在main.js中直接复制下面代码即可

// js
if (!Number.prototype._toFixed) {
  // eslint-disable-next-line no-extend-native
  Number.prototype._toFixed = Number.prototype.toFixed
}
// eslint-disable-next-line no-extend-native
Number.prototype.toFixed = function (d) {
  var s = this + "";
  if (!d) d = 0;
  if (s.indexOf(".") === -1) s += ".";
  s += new Array(d + 1).join("0");
  if (new RegExp("^(-|\\+)?(\\d+(\\.\\d{0," + (d + 1) + "})?)\\d*$").test(s)) {
    let s = "0" + RegExp.$2; var pm = RegExp.$1; var a = RegExp.$3.length; var b = true;
    if (a === d + 2) {
      a = s.match(/\d/g);
      if (parseInt(a[a.length - 1]) > 4) {
        for (var i = a.length - 2; i >= 0; i--) {
          a[i] = parseInt(a[i]) + 1;
          if (a[i] === 10) {
            a[i] = 0;
            b = i !== 1;
          } else break;
        }
      }
      s = a.join("").replace(new RegExp("(\\d+)(\\d{" + d + "})\\d$"), "$1.$2");
    }
    if (b) s = s.substr(1);
    return (pm + s).replace(/\.$/, "");
  }
  return this + "";
};
### 前端 toFixed 方法精度问题的解决方案 在前端开发中,`toFixed()` 方法用于将数字转换为指定小数位数的字符串表示形式。然而,由于 JavaScript 中浮点数的二进制存储特性,`toFixed()` 方法在处理精度数据时可能会出现精度丢失问题[^1]。以下是几种常见的解决方案: #### 1. 使用整数运算避免浮点数精度问题 一种简单有效的解决方法是将涉及的小数转换为整数进行运算,最后再将结果转换回小数形式。例如,如果需要处理金额相关的计算,可以将所有数值乘以 100(即将单位从元转换为分)进行计算,完成后除以 100 再格式化输出[^2]。 ```javascript function handlePrecision(num, digits) { const factor = Math.pow(10, digits); return (Math.round(num * factor) / factor).toFixed(digits); } console.log(handlePrecision(1.005, 2)); // 输出 "1.01" ``` #### 2. 自定义 `toFixed` 方法 为了避免 `toFixed()` 方法在某些特殊场景下的精度丢失问题,可以编写一个自定义的 `toFixed` 方法。以下是一个参考实现,该方法通过四舍五入的方式确保结果的准确性[^3]。 ```javascript function customToFixed(number, decimalPlaces) { const factor = Math.pow(10, decimalPlaces); const rounded = Math.round(number * factor) / factor; return rounded.toFixed(decimalPlaces); } console.log(customToFixed(1.335, 2)); // 输出 "1.34" console.log(customToFixed(1.345, 2)); // 输出 "1.35" ``` #### 3. 使用第三方库 对于需要更高精度的场景,推荐使用专门的高精度计算库,如 `decimal.js` 或 `big.js`。这些库能够有效避免浮点数运算中的精度丢失问题,并提供更丰富的功能支持[^2]。 以下是一个基于 `decimal.js` 的示例: ```javascript const Decimal = require('decimal.js'); function preciseToFixed(number, decimalPlaces) { return new Decimal(number).toDecimalPlaces(decimalPlaces).toString(); } console.log(preciseToFixed(1.005, 2)); // 输出 "1.01" console.log(preciseToFixed(1.335, 2)); // 输出 "1.34" ``` #### 4. 四舍五入处理 另一种解决方案是通过手动截取小数位并进行四舍五入操作来避免精度丢失问题[^4]。这种方法的核心思想是对原始数值进行放大、取整后再缩小,从而保证结果的准确性。 ```javascript function roundToFixed(number, decimalPlaces) { const factor = Math.pow(10, decimalPlaces); const rounded = Math.round(number * factor) / factor; return rounded.toFixed(decimalPlaces); } console.log(roundToFixed(1.335, 2)); // 输出 "1.34" console.log(roundToFixed(1.345, 2)); // 输出 "1.35" ``` ### 注意事项 - 在选择解决方案时,需根据具体业务场景的需求权衡性能与精度。 - 对于金融、科学计算等对精度要求极高的领域,建议优先考虑使用专业的高精度计算库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值