js中toFixed精度问题的解决办法

发表于

最近在做项目的时候，遇到了有四舍五入保留两位的需求，当时不假思索的直接使用了js原生的toFixed方法，结果问题百出。有以下几点问题：

1.四舍五入并不是真正的四舍五入

这个问题是在测试阶段我们的测试人员提出来的。一开始我也很吃惊，结果待我在控制台试了一些数据之后，我懵逼了,我一直在用的toFixed方法竟然有问题，我竟然糊涂的用它做了很多事！以下是我在chrome上的结果：

1
2
3
4
5
6
1.35.toFixed(1) // 1.4 正确
1.335.toFixed(2) // 1.33  错误
1.3335.toFixed(3) // 1.333 错误
1.33335.toFixed(4) // 1.3334 正确
1.333335.toFixed(5)  // 1.33333 错误
1.3333335.toFixed(6) // 1.333333 错误

果然有问题，只能网上找资料了，结果又发现同样是上面的一段代码，在IE下又小同大异，以下是IE上的结果：

1
2
3
4
5
6
1.35.toFixed(1) // 1.4 正确
1.335.toFixed(2) // 1.34  正确
1.3335.toFixed(3) // 1.334 正确
1.33335.toFixed(4) // 1.3334 正确
1.333335.toFixed(5)  // 1.33334 正确
1.3333335.toFixed(6) // 1.333334 正确

果然IE才是爸爸。难道是浏览器兼容性问题？兼容性问题难道不应该是出在IE中吗？既然找到问题所在，就好下手。我的办法是把要四舍五入的后一位单独拎出来单独判断。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let result = number.toString();
const arr = result.split('.');
const integer = arr[0];
const decimal = arr[1];
result = integer + '.' + decimal.substr(0, n);
const last = decimal.substr(n, 1);
// 四舍五入，转换为整数再处理，避免浮点数精度的损失
if (parseInt(last, 10) >= 5) {
const x = Math.pow(10, n);
result = ((parseFloat(result) * x) + 1) / x;
result = result.toFixed(n);
}
return result;

自己测了几遍，貌似没什么问题，OK~

2.计算机二进制编码导致的精度问题

没过多久，测试又提出来页面报错了~~ 心塞啊，怎么可能报错呢？自己debugger，发现页面中的js进了死循环。很明显问题出在toFixed中回调了toFixed，结果没有走出来，继续debugger，又有了进人的发现。以下是控制台测试：

console.log(2.115 100) // 211.50000000000003
console.log(2.0115 1000) // 2011.4999999999998
能告诉我是在闹哪样？好吧，我猜到了，肯定是计算机的进制问题。既然你一直进入循环，我就手动把你拉出来。

result = (Math.round((parseFloat(result)) * x) + 1) / x;
强制四舍五入取整，不会进死循环了！

以下是全部代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// toFixed兼容方法
Number.prototype.toFixed = 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;
};