【转】为什么 toFixed 会存在误差？

原文地址：https://wyiyi.github.io/amber/2021/03/25/number-precision/

cover

---

description: "来看看规范里怎么说"
date: 2021.07.04 10:34
categories:
- JavaScript
tags: [JavaScript, Number]
keywords: toFixed, MDN, precision, ECMAScript

---

在保留有效数字的时候我们经常会使用到 toFixed() 函数，但发现这个方法会存在一些奇怪的问题。

toFixed() 的值错误？

在JS中会有如下的现象，我们需要对最后的结果值进行保留固定位数且四舍五入处理，但发现结果不是所期望的。

1.5.toFixed(0) // 2 正确
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 错误

MDN 中关于 toFixed 的 Warning 也表明了浮点数不能以二进制精确表示所有小数，这可能会导致意外结果：

Warning: Floating point numbers cannot represent all decimals precisely in binary.
This can lead to unexpected results, such as 0.1 + 0.2 === 0.3 returning false .

为什么会导致 toFixed() 的值不准确呢？

ECMAScript® 2015 Language Specification（Standard ECMA-262
6th Edition，即 ES6）中关于 Number.prototype.toFixed 描述如下：

Number.prototype.toFixed(fractionDigits)

The following steps are performed:

    1. Let x be thisNumberValue(this value).
    2. ReturnIfAbrupt(x).
    3. Let f be ToInteger(fractionDigits). (If fractionDigits is undefined, this step produces the value 0).
    4. ReturnIfAbrupt(f).
    5. If f < 0 or f > 20, throw a RangeError exception. However, an implementation is permitted to extend the behaviour of toFixed for values of f less than 0 or greater than 20. In this case toFixed would not necessarily throw RangeError for such values.
    6. If x is NaN, return the String "NaN".
    7. Let s be the empty String.
    8. If x < 0, then
        Let s be "-".
        Let x = –x.
    9. If x ≥ 10^21, then
        Let m = ToString(x).
    10.Else x < 1021,
         a. Let n be an integer for which the exact mathematical value of n ÷ 10f – x is as close to zero as possible. If there are two such n, pick the larger n.
         b. If n = 0, let m be the String "0". Otherwise, let m be the String consisting of the digits of the decimal representation of n (in order, with no leading zeroes).
         c. If f ≠ 0, then
            i.  Let k be the number of elements in m.
            ii. If k ≤ f, then
                1. Let z be the String consisting of f+1–k occurrences of the code unit 0x0030.
                2. Let m be the concatenation of Strings z and m.
                3. Let k = f + 1.
            iii. Let a be the first k–f elements of m, and let b be the remaining f elements of m.
            iv.  Let m be the concatenation of the three Strings a, ".", and b.
    11. Return the concatenation of the Strings s and m.

ECMAScript® 2021 中关于此部分的描述与上面略有差异，但不影响结果。

我们将 1.335.toFixed(2) 值代入:

Number.prototype.toFixed ( fractionDigits ) => 1.335.toFixed(2)

1. x = thisNumberValue(1.335)，x = 1.335
2. ReturnIfAbrupt(x)，返回 x
3. f = ToInteger(fractionDigits)，fractionDigits = 2，f = 2
4. ReturnIfAbrupt(f)，返回 f
5. 如果 f < 0 或 f > 20，抛出 RangeError 异常。具体的实现允许扩展 toFxied 的行为，以支持 f < 0 或 f > 20 的情况，此时不会抛出异常。由于 f = 2 所以不会异常
6. 如果 x 是 NaN，则就会返回字符串型的 NaN（不满足）
7. s = ''
8. 如果 x < 0：（不满足）
   a. 则s变成"-"
   b. x = -x
9. 如果 x >= 10^21 则令 m = ToString(x)（不满足）
10. 如果 x < 10^21（x = 1.335，满足）
    a. 使 n 为整数以满足 n / 10^f – x 尽可能的接近于 0，如果存在两个这样的 n，选择较大的。
       候选的 n 有 132、133、134， n/10^2 - 1.335 计算结果如下： 
        ' 132/100-1.335 ' —— -0.014999999999999902
        ' 133/100-1.335 ' —— -0.004999999999999893
        ' 134/100-1.335 ' ——  0.0050000000000001155
        当 n 的值为 133 时最接近 0，所以 n = 133
    b. 如果 n = 0，则让 m = "0"，否则，让 m 是由 n 的十进制表示的数字组成的字符串（按顺序，没有前导零），所以 m = 133
    c. 如果 f ≠ 0， 则（f = 2，满足）
        i. k 为 m 的数字个数，所以 k = 3，
       ii. 如果 k < f 则（k = 3，f = 2，不满足）
           1. 设z是由代码单元 0x0030的f +1– k次出现组成的字符串。
           2. 让m是字符串z和m的串联。
           3. 令k = f + 1。
       iii. a 为 m 的前 k-f（3-2）个元素，所以 a = 1，b 为 m 的余下元素，所以 b = 33，
        iv. m 为 a、'.' 和 b 的连接，所以 m = 1.33
11. 返回字符串 s（''）和 m（1.33）的串联，即 1.33

所以 1.335.toFixed(2) = 1.33

因为在计算机中使用的是二进制进行计算，十进制浮点数与二进制数转换 及 二进制算术运算 中介绍过在使用二进制进行浮点数的表示和运算过程中会存在丢失精度的问题，按照上面规范中要求的 toFixed 的算法，在计算 n / 10^f – x 时就会出现误差，这也就是 toFixed() 会存在错误值的原因。