重写 JavaScript toFixed() 实现四舍五入

1 案例源码

​ 本项目 github 源码：https://github.com/trp1119/vue-small-case

2 原生 toFixed 存在的问题

2.1 前言

​ JavaScript 原生 toFixed() 方法并未才有“四舍五入”法，而是采用”四舍六入五成双（又称四舍六入五留双、舍六入五取偶、银行家舍入）“法，即：”四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一“。

​ 通俗来说，这里“四“是指 ≤4 时舍去，"六"是指 ≥6 时进上，“五“指的是根据 5 后面的数字来定，当 5 后有有效数（即不为 0 的数）时，舍 5 入 1 ；当 5 后无有效数字（即为 0 或无数字）时，需要分两种情况来讲： 5 前为奇数，舍 5 入 1 ； 5 前为偶数，舍 5 不进（ 0 是偶数）。

​ 但在实际应用中，发现浏览器并未按上述方法处理数据。

2.2 浏览器处理数据展示

2.2.1 情况一 5 后有有效数字

2.2.1.1 Chrome 浏览器处理数据展示

​ 当 5 后有有效数字时，“五后非零就进一”，由数据展示可以看出，与浏览器展示相同。

​ （注意：每列首条数据即 5 后为 0 的数据不应展示在此，应归到 【2.2.2 情况二 5 后无有效数字】，此处展示仅为对比查看。）

2.2.1.1.png

2.2.1.2 IE 11浏览器处理数据展示

​ IE 11浏览器表现与Chrome浏览器相同

2.2.1.2.png

2.2.2 情况二 5 后无有效数字

2.2.2.1 Chrome 浏览器处理数据展示

​ 当 5 后为 0（或无有效数字）时，“五前为偶应舍去，五前为奇要进一”，由数据展示可以看出，浏览器并未如此展示。

​ 当 5 前为 2，4，5，7，8 时，舍去，当 5 前为 0，1，3，6，9 时，进一。

2.2.2.1.png

2.2.2.2 IE 11浏览器处理数据展示

​ IE 11浏览器表现与Chrome浏览器相同

2.2.2.2.png

3 重写 toFixed() 实现四舍五入

3.1 代码展示

/**
 * 重写 Number.prototype.toFixed() 方法
 * 解决四舍五入问题
 * @param n 四舍五入位数
 */
Number.prototype.toFixed = function (n) {
  const number = this
  // 如果 digits 参数太小或太大。0 到 20（包括）之间的值不会引起 RangeError。实现环境（implementations）也可以支持更大或更小的值
  if (n > 20 || n < 0) {
    throw new RangeError('toFixed() digits argument must be between 0 and 20')
  }
  // 如果该方法在一个非Number类型的对象上调用
  if (isNaN(number)) {
    throw new TypeError(number + '.toFixed() is not a function')
  }
  // 如果数值大于 1e+21，该方法会简单调用 Number.prototype.toString()并返回一个指数记数法格式的字符串
  if (number >= Math.pow(10, 21)) {
    return number.toString()
  }
  // 如果忽略该参数，则默认为 0，进行四舍五入，不包括小数部分
  if (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 ++) {
      result += '0'
    }
    return result
  }

  // 小数情况（原位数 <= 需求位数）
  const integer = arr[0]
  let decimal = arr[1]
  if (decimal.length === n) {
    return result
  }
  if (decimal.length < n) {
    for (let i = 0; i < n - decimal.length; i++) {
      result += '0'
    }
    return result
  }
  // 小数情况（原位数 > 需求位数，需四舍五入）
  result = integer + '.' + decimal.substring(0, n)
  const last = decimal.substring(n, n+1)
  if (parseInt(last, 10) >= 5) {
    const multiple = Math.pow(10, n)
    result = ((Math.round(parseFloat(result) * multiple) + 1) / multiple).toString() // 使用 Math.round 防止结果无限小数
    // 0 补足小数
    decimal = result.split('.')[1]
    if (decimal.length < n) {
      for (let i = 0; i < n - decimal.length; i++) {
        result += '0'
      }
      return result
    }
  }
  return result
}

3.2 效果演示

3.2.1 情况一 5 后有有效数字

3.2.1.1 Chrome 浏览器处理数据展示

3.2.1.1.png

3.2.1.2 IE 11浏览器处理数据展示

​ IE 11浏览器表现与Chrome浏览器相同

3.2.1.2.png

3.2.2 情况二 5 后无有效数字

3.2.2.1 Chrome 浏览器处理数据展示

3.2.2.1.png

3.2.2.2 IE 11浏览器处理数据展示

​ IE 11浏览器表现与Chrome浏览器相同

3.2.2.2.png