JavaScript中的toFixed()精度问题以及解决方法

一、用法

设置浮点数的精度，采用的四舍五入。

var a = 1.333;
console.log('a:', a.toFixed(2));
//a:1.33

二、问题

toFixed在不同的浏览器实现，在IE10及以上里面是正常的四舍五入，但是别的浏览器里面就不一样了，它不是正常的四舍五入（等下重点说），比如：

var a = 1.335;
console.log(a.toFixed(2))
// IE         1.34
//chorme   1.33

官方说法是：
toFixed它是一个四舍六入五成双的诡异的方法(也叫银行家算法)，"四舍六入五成双"含义：对于位数很多的近似数，当有效位数确定后，其后面多余的数字应该舍去，只保留有效数字最末一位，这种修约（舍入）规则是“四舍六入五成双”，也即“4舍6入5凑偶”这里“四”是指≤4 时舍去，"六"是指≥6时进上，"五"指的是根据5后面的数字来定，当5后有数时，舍5入1；当5后无有效数字时，需要分两种情况来讲：①5前为奇数，舍5入1；②5前为偶数，舍5不进。（0是偶数）

但是，经过测试发现，在Chorme里面，并没有完全遵守这个规则。
 

var b = 1.335
b.toFixed(2)
"1.33"

var b = 1.345
b.toFixed(2)
"1.34"

var b = 1.355
b.toFixed(2)
"1.35"

var b = 1.365
b.toFixed(2)
"1.36"

var b = 1.375
b.toFixed(2)
"1.38"

var b = 1.385
b.toFixed(2)
"1.39"

可以发现在chorme下没有完全去遵循这个规律，或许它有自己的算法，但是毕竟它没有遵循通用的银行家算法，所以tofixed这个方法在涉及到金钱计算的业务中还是少用，最好别用，否则可能会出大问题！

三、 解决方案

由于之前的页面开发中都是采用toFixed，替换原来的使用方法担心出问题。所以采用原型链改写toFixed方法。

1）number.js

// 重新写入 toFixed 方法
export const numFunc = 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 result;
}
export default Number.prototype.toFixed = numFunc

 2）main.js中引入number.js文件

参考资料：js中toFixed精度问题的原因及解决办法 - 走看看

                  JavaScript中的toFixed()