JavaScript中所有的数字，无论是整数还是小数，其类型都是 Number，遵循 IEEE 754 程序内部用一个 64 位固定长度的二进制进行存储表示。JavaScript 中的浮点数进行运算时，经常会遇到计算精度问题，例如经典的 0.1+0.2=0.30000000000000004 ，本文将探究 JavaScript 的浮点数，并解释为何 0.1+0.2=0.30000000000000004

浮点数的二进制表示

JavaScript 里的数字是采用 IEEE 754 标准的 64 位 double 双精度浮点数（与之相关的还有 32 位 float 单精度浮点数）。该规范定义了浮点数的格式。

对于 32 位的浮点数，最高的 1 位是符号位 S，接着的 8 位是指数 E，剩下的 23 位为尾数位 M
对于 64 位的浮点数，最高的 1 位是符号位 S，接着的 11 位是指数 E，剩下的 52 位为尾数位 M

实际数字的计算公式为：

1

V = (-1)^S * M * 2^E

接下来只对 64 位浮点数的二进制表示进行分析：

该计算公式遵循科学计数法的规范，对于十进制表示而言，尾数的范围是 0<M<10 ；对于二进制表示而言，尾数的范围是 0<M<2 。浮点数二进制表示，所以此处尾数的范围是： 0<M<2 ，也就是说 M 的整数位始终是 1，所以可以舍去，只保留后面的小数部分，这样就能表示 53 位了。

指数位 E 是一个无符号整数，64 位浮点数中，指数位长度是 11 位，取值范围是 [0~2047] ，由于科学计数法中指数可正可负，所以，中间数 1023， [0,1022] 表示为负， [1024,2047] 表示为正

最终的公式变成：

1

V = (-1)^S * (M + 1) * 2^(E - 1023)

十进制转换为二进制

十进制整数转换为二进制整数： 采用”除2取余，逆序排列”法。具体做法是：用 2 去除十进制整数，可以得到一个商和余数；再用 2 去除商，又会得到一个商和余数，如此进行，直到商为零时为止，然后把先得到的余数作为二进制数的低位有效位，后得到的余数作为二进制数的高位有效位，依次排列起来。

64 位浮点数的二进制表示

十进制数和 64 位浮点数二进制相互转换可以访问该网站进行：
http://www.binaryconvert.com/convert_double.html

下面以 0.1 为例，对其进行 64 位二进制表示

0.1 转换成二进制：0.0001100110011001100(1100循环)，即 1.100110011001100x2^-4 ，得到:

指数位 E = -4 + 1023 = 1019 ( 1019 11 位二进制表示为：01111111011)

尾数位 M = 100110011001100… (舍去首位 1)

所以十进制 0.1 转换成 64 位浮点数二进制表示为：

1	0011111110111001100110011001100110011001100110011001100110011010

而将 64 位浮点数二进制的 0.1 转换回十进制时，得到： 1.00000000000000005551115123126E-1 。

但是：此时输出 x 为啥能得到 0.1 呢？

1 2	var x = 0.1 console.log(x) // -> 0.1

分析： 尾数位固定长度 52 位，加上省略的整数位 1，就再加上一位，那么尾数最多能表示的数为：2^53=9007199254740992，对应的十进制科学计数尾数是 9.007199254740992，这也是 JavaScript 最多能表示的精度，长度是 16，所以用 toPrecision(16) 来做精度运算，于是：

1	0.10000000000000000555.toPrecision(16) // -> 0.1

如果使用更高精度，那么可能得到的就不是 0.1

1 2	var x = 0.1 console.log(x.toPrecision(21)) // -> 0.100000000000000005551

注意： toPrecision 方法最大指定精度为 21。对于 0.1 而言，64 位二进制表示，最多能表示的精度为 16 位；转换成十进制后 0.100000000000000005551 ，默认的 JavaScript 使用 16 位进行截取，我们最多能使用 21 位进行截取，注意二者的区别。

toPrecision 和 toFixed

• toPrecision 方法以指定的精度返回该数值对象的字符串表示，精度是从左至右第一个不为0的数开始数起
• toFixed 方法使用定点表示法来格式化一个数，是小数点后指定位数取整，从小数点开始数起

1 2 3 4 5

var x = 0.12345 x.toPrecision(3) // -> "0.123" var y = 1.234 y.toFixed(3) // -> "1.234"

这两个方法在截取数字时，都有进行四舍五入处理，但是都存在 BUG，使用要谨慎❗️


1 2 3 4 5 6 7 8

var x = 0.3456 x.toPrecision(3) // -> "0.346" x.toFixed(3) // -> "0.346" // BUG var y = 1.005 y.toPrecision(3) // -> "1.00" y.toFixed(2) // -> "1.00"

原因是：1.005 实际对应的数字是 1.00499999999999989，在四舍五入时全部被舍去了

0.1+0.2=0.30000000000000004

在计算 0.1+0.2 的时候，现将其转换为二进制，得到的结果也是二进制，然后再将其转换为十进制


1 2 3

0.00011001100110011001100110011001100110011001100110011010 + 0.0011001100110011001100110011001100110011001100110011010 = 0.0100110011001100110011001100110011001100110011001100111

计算结果 0.0100110011001100110011001100110011001100110011001100111 转换成十进制，就是 0.30000000000000004 ，这就导致出现了误差。

遇到浮点数误差问题时可以直接使用 dt-fe/number-precision 完美支持浮点数的加减乘除、四舍五入等运算。

数值范围

根据浮点数算术标准，指数位最大值为 2047，E = 2047 -1023 = 1024，所以 JavaScript 能表示的数值范围是： [-(2^1024-1), +(2^1024-1)] ，即：正负1.7976931348623157乘以10的308次方 ，注意：


1 2 3 4 5

Math.pow(2, 1023) -> 8.98846567431158e+307 Math.pow(2, 1024) -> Infinity

• Number.MIN_VALUE 属性表示在 JavaScript 中所能表示的最小的正值
  • 值为 5e-324
  • MIN_VALUE 属性是 JavaScript 里最接近 0 的正值，而不是最小的负值
  • 小于 MIN_VALUE 的值将会转换为 0
  • Number.MAX_VALUE 属性表示在 JavaScript 里所能表示的最大数值
    • 值为 1.7976931348623157e+308
    • 大于 MAX_VALUE 的值代表 “Infinity”

    JavaScript 规定能安全的表示数字(进行精确算术运算)的范围在 ： [-2^53, +2^53] ，即正负2的53次方 ；对于超过这个范围的整数，JavaScript 依旧可以进行运算，但却不保证运算结果的准确性，这也是 JavaScript 中安全整数的两个边界： Number.MIN_SAFE_INTEGER 和 Number.MAX_SAFE_INTEGER 。
    

    1 2 3 4 5

    Number.MIN_SAFE_INTEGER -> -9007199254740991 Number.MAX_SAFE_INTEGER -> 9007199254740991

    超过安全整数范围的，计算不保证正确，例如：
    

    1 2 3 4 5 6

    Math.pow(2, 53) -> 9007199254740992 Math.pow(2, 53) + 1 -> 9007199254740992 Math.pow(2, 53) + 2 -> 9007199254740994

    对于不在 [-2^53, +2^53] 范围中的数字，例如 (2^53, 2^63) 之间的数会出现什么情况呢？

    • (2^53, 2^54) 之间的数会两个选一个，只能精确表示偶数
    • (2^54, 2^55) 之间的数会四个选一个，只能精确表示4的倍数
    • … 依次跳过更多2的倍数

    下面这张图能很好的表示 JavaScript 中浮点数和实数（Real Number）之间的对应关系，我们常用的 [-2^53, 2^53] 只是最中间非常小的一部分，越往两边越稀疏越不精确。

    参考链接

    JavaScript 浮点数陷阱及解法