1 案例源碼
? 本項(xiàng)目 github 源碼：https://github.com/trp1119/vue-small-case
2 原生 toFixed 存在的問(wèn)題
2.1 前言
? JavaScript 原生 toFixed() 方法并未才有“四舍五入”法，而是采用”四舍六入五成雙（又稱四舍六入五留雙、舍六入五取偶、銀行家舍入）“法，即：”四舍六入五考慮，五后非零就進(jìn)一，五后為零看奇偶，五前為偶應(yīng)舍去，五前為奇要進(jìn)一“。
? 通俗來(lái)說(shuō)，這里“四“是指 ≤4 時(shí)舍去，"六"是指 ≥6 時(shí)進(jìn)上，“五“指的是根據(jù) 5 后面的數(shù)字來(lái)定，當(dāng) 5 后有有效數(shù)（即不為 0 的數(shù)）時(shí)，舍 5 入 1 ；當(dāng) 5 后無(wú)有效數(shù)字（即為 0 或無(wú)數(shù)字）時(shí)，需要分兩種情況來(lái)講： 5 前為奇數(shù)，舍 5 入 1 ； 5 前為偶數(shù)，舍 5 不進(jìn)（ 0 是偶數(shù)）。
? 但在實(shí)際應(yīng)用中，發(fā)現(xiàn)瀏覽器并未按上述方法處理數(shù)據(jù)。
2.2 瀏覽器處理數(shù)據(jù)展示
2.2.1 情況一 5 后有有效數(shù)字
2.2.1.1 Chrome 瀏覽器處理數(shù)據(jù)展示
? 當(dāng) 5 后有有效數(shù)字時(shí)，“五后非零就進(jìn)一”，由數(shù)據(jù)展示可以看出，與瀏覽器展示相同。
? （注意：每列首條數(shù)據(jù)即 5 后為 0 的數(shù)據(jù)不應(yīng)展示在此，應(yīng)歸到 【2.2.2 情況二 5 后無(wú)有效數(shù)字】，此處展示僅為對(duì)比查看。）
2.2.1.2 IE 11瀏覽器處理數(shù)據(jù)展示
? IE 11瀏覽器表現(xiàn)與Chrome瀏覽器相同
2.2.2 情況二 5 后無(wú)有效數(shù)字
2.2.2.1 Chrome 瀏覽器處理數(shù)據(jù)展示
? 當(dāng) 5 后為 0（或無(wú)有效數(shù)字）時(shí)，“五前為偶應(yīng)舍去，五前為奇要進(jìn)一”，由數(shù)據(jù)展示可以看出，瀏覽器并未如此展示。
? 當(dāng) 5 前為 2，4，5，7，8 時(shí)，舍去，當(dāng) 5 前為 0，1，3，6，9 時(shí)，進(jìn)一。
2.2.2.2 IE 11瀏覽器處理數(shù)據(jù)展示
? IE 11瀏覽器表現(xiàn)與Chrome瀏覽器相同
3 重寫 toFixed() 實(shí)現(xiàn)四舍五入
3.1 代碼展示
/**
* 重寫 Number.prototype.toFixed() 方法
* 解決四舍五入問(wèn)題
* @param n 四舍五入位數(shù)
*/
Number.prototype.toFixed = function (n) {
const number = this
// 如果 digits 參數(shù)太小或太大。0 到 20（包括）之間的值不會(huì)引起 RangeError。實(shí)現(xiàn)環(huán)境（implementations）也可以支持更大或更小的值
if (n > 20 || n < 0) {
throw new RangeError('toFixed() digits argument must be between 0 and 20')
}
// 如果該方法在一個(gè)非Number類型的對(duì)象上調(diào)用
if (isNaN(number)) {
throw new TypeError(number + '.toFixed() is not a function')
}
// 如果數(shù)值大于 1e+21，該方法會(huì)簡(jiǎn)單調(diào)用 Number.prototype.toString()并返回一個(gè)指數(shù)記數(shù)法格式的字符串
if (number >= Math.pow(10, 21)) {
return number.toString()
}
// 如果忽略該參數(shù)，則默認(rèn)為 0，進(jìn)行四舍五入，不包括小數(shù)部分
if (n === undefined || n === 0) {
return Math.round(number).toString()
}
let result = number.toString()
const arr = result.split('.')
// 整數(shù)情況
if (arr.length < 2) {
result += '.'
for (let i = 0; i < n; i ++) {
result += '0'
}
return result
}
// 小數(shù)情況（原位數(shù) <= 需求位數(shù)）
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
}
// 小數(shù)情況（原位數(shù) > 需求位數(shù)，需四舍五入）
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 防止結(jié)果無(wú)限小數(shù)
// 0 補(bǔ)足小數(shù)
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 后有有效數(shù)字
3.2.1.1 Chrome 瀏覽器處理數(shù)據(jù)展示
3.2.1.2 IE 11瀏覽器處理數(shù)據(jù)展示
? IE 11瀏覽器表現(xiàn)與Chrome瀏覽器相同
3.2.2 情況二 5 后無(wú)有效數(shù)字
3.2.2.1 Chrome 瀏覽器處理數(shù)據(jù)展示
3.2.2.2 IE 11瀏覽器處理數(shù)據(jù)展示
? IE 11瀏覽器表現(xiàn)與Chrome瀏覽器相同
