JavaScript 中的高精度浮点数

1. 二进制小数

在十进制中，123.45 可以表示为 1 × 10² + 2 × 10¹ + 3 × 10⁰ + 4 × 10⁻¹ + 5 × 10⁻² = 123 ⁴⁵⁄₁₀₀，小数点的位置决定了数字的权重，左边的数是 10 的正幂，右边的数是 10 的负幂。

类似，二进制数 101.11 也可以表示为 1 × 2² + 0 × 2¹ + 1 × 2⁰ + 1 × 2⁻¹ + 1 × 2⁻² = 4 + 0 + 1 + ¹⁄₂ + ¹⁄₄ = 5 ³⁄₄，小数点向左移动一位相当于这个数被 2 除，小数点向右移动一位相当于这个数乘以 2。

在有限的长度下，十进制无法准确表示像 ¹⁄₃、³⁄₅ 这样的数，二进制也无法准确表示像 ¹⁄₅ 这样的数，增加数字的长度可以提高表示的精度。

2. IEEE 745 标准

IEEE 745 定义了在计算机中浮点数的表示及其运算的标准，标准指定了两种基本浮点格式：单精度和双精度，两种扩展浮点格式：单精度扩展和双精度扩展。

浮点格式是一种数据结构，用于指定包含浮点数的字段、这些字段的布局及其算术解释。浮点存储格式指定如何将浮点格式存储在内存中，具体选择哪种存储格式由实现工具决定，JavaScript 采用的是 IEEE 745 双精度浮点格式。

IEEE 浮点标准用 V = (−1)ˢ × 2ᴱ × M 的形式来表示一个数：

• 符号（sign）s 决定这个数是正数 s = 0 还是负数 s = 1。
• 指数（exponent）E 的作用是对浮点数的加权，权重是 2 的 E 次幂。
• 尾数（significand）M 是一个二进制小数。

如下图所示，表示浮点数的位划分为三个字段：

• 一个符号位 s。
• k 位的指数字段 exp = eᵏ⁻¹ ... e¹e⁰ 编码指数 E。
• n 位的小数字段 frac = f⁻¹f⁻² ... f⁻ⁿ 编码尾数 M。

图中给出了两种最常见的格式，32 位的单精度格式：1 位符号位、k = 8 的指数字段、n = 23 的小数字段，64 位的双精度格式：1 位符号位、k = 11 的指数字段、n = 52 的小数字段。

3. IEEE 浮点格式转为十进制数

浮点格式要形成最终表示的值 V = 2ᴱ × M，需要对各个字段作如下处理：

• 指数 E = e - Bias，e 表示为 eᵏ⁻¹ ... e¹e⁰，Bias 是一个等于 2ᵏ⁻¹ - 1 的偏移量。
• 小数字段 frac = f⁻¹f⁻² ... f⁻ⁿ，尾数 M = 1 + frac。

另外还有两种情况：

• 当指数字段全为 0 时，指数值是 1 - Bias，尾数值是 M = frac。
• 当指数字段全为 1 时，小数字段全为 0 表示无穷，小数字段不等于 0 表示 NaN。

下面以 8 位浮点格式为例介绍如何将其转为十进制数。

如：0 0110 110，其中有 k = 4 的指数字段和 n = 3 的小数字段，各个部分的处理如下：

• 偏移量 Bias = 2⁴⁻¹ - 1 = 7。
• 指数字段 e = 0 × 2³ + 1 × 2² + 1 × 2¹ + 0 × 2⁰ = 6。
• 指数 E = 6 - 7 = -1。
• 小数字段 frac = 1 × 2⁻¹ + 1 × 2⁻² + 0 × 2⁻³ = ³⁄₄。
• 尾数 M = 1 + ³⁄₄ = ⁷⁄₄。

最终值：V = 2ᴱ × M = 2⁻¹ × ⁷⁄₄ = ¹⁄₂ × ⁷⁄₄ = ⁷⁄₈ = 0.875。

4. 舍入运算

表示方法限制了浮点数的范围和精度，所以浮点运算只能近似的表示实数运算。

IEEE 浮点格式定义了 4 种不同的舍入方式：

• Round-to-even，向偶数舍入，将数字向上或向下舍入，使得结果的最低有效数字是偶数，如以十进制数为例：1.5 和 2.5 都将舍入为 2。
• Round-toward-zero，向零舍入，把正数向下舍入，负数向上舍入。
• Round-down，向下舍入，把正数、负数都向下舍入。
• Round-up，向上舍入，把正数、负数都向上舍入。

5. JavaScript 中的浮点数

JavaScript 中的浮点数有两种来源，由服务端返回的数据或者通过运算产生的结果，从服务端返回数据到前端展现会经过下面几个环节：

                             +-----------------------------------------+
                             |                                         v
+--------------------+     +------------------+     +----------+     +-----------+     +-------------+
| HTTP Response Body | --> | 解析 JSON 字符串   | --> | 四则运算  | --> | 渲染页面   | --> | Canvas、SVG |
+--------------------+     +------------------+     +----------+     +-----------+     +-------------+
                                                                       |
                                                                       |
                                                                       v
                                                                     +-----------+
                                                                     | TEXT_NODE |
                                                                     +-----------+

在这个过程中，需要解决 JSON 解析丢失精度的问题、高精度浮点数运算的问题、高精度浮点数展示的问题。

6. JSON 解析

在 JavaScript 中通常会用 number 数据类型来保存数值、进行数值的运算，但由于 IEEE 浮点格式的限制，用 number 类型保存一个大浮点数时，精度会丢失。

const num = 106119.43448475052345678

// 106119.43448475053

同样，我们常用的 JSON.parse 方法解析 JSON 字符串时，大浮点数的精度也会丢失。

const data = JSON.parse('{"values": [106119.43448475052345678,755180144.3253138888456,3086.27072845812345678]}');

// {
//   values: [
//     106119.43448475053,
//     755180144.3253139,
//     3086.2707284581234
//   ]
// }

要确保从服务端获取的大浮点数精度不丢失，就不能用 JSON.parse 方法来解析 HTTP Response Body 里的 JSON 字符串，也不能直接用 number 类型来保存数值。

解析 JSON 时可以把数值保存为 string 类型：

const data = {
  values: [
    '106119.43448475052345678',
    '755180144.3253138888456',
    '3086.27072845812345678'
  ]
};

JSON 解析可以使用第 3 方库，如：https://github.com/sidorares/json-bigint

7. JavaScript 高精度数的运算

要对高精度数进行运算，首先要将高精度数转为便于运算的结构，如：

// '106119.43448475052345678'
let num = {
  // 数值拆成数组
  c: [106119, 43448475052345, 67800000000000],
  // 标识数值的指数
  e: 5,
  // 标识数值的正负
  s: 1
};

// '3086.27072845812345678'
let num2 = {
  c: [3086, 27072845812345, 67800000000000],
  e: 3,
  s: 1
};

转为如上结构后，再对数组中的各段数值进行运算。

高精度数值运算可以使用第 3 方库，如：http://mikemcl.github.io/bignumber.js/

8. 高精度浮点数在网页中的展示

浮点数在页面上的展示通常有两种方式，创建为一个文本节点、通过 Canvas 或 SVG 画成图表。

创建为文本节点的来展示没有什么问题，如：

document.createTextNode('106119.43448475052345678');
// 或
let div = document.createElement('div');
div.innerText = '106119.43448475052345678';

画图表通常会用到第 3 方库，如：ECharts、G2 等等，各种图表的具体实现上会依赖数值的比较、四则运算等等，目前 ECharts、G2 还没有对大浮点数的支持。

参考资料

• IEEE 754，https://en.wikipedia.org/wiki/IEEE_754
• Numerical Computation Guide，https://docs.oracle.com/cd/E19957-01/806-3568/ncgTOC.html
• 《深入理解计算机系统》

皮成，2018.07.10