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
网友评论