JSON.parse后数字类型数据不一致，如整数变浮点或精度丢失，如何解决？

Question

**问题：JSON.parse后数字类型数据不一致，如何解决？** 在使用`JSON.parse`解析JSON字符串时，可能会遇到数字类型数据不一致的问题，例如大整数被解析为浮点数，导致精度丢失。这是因为JavaScript中的数字类型是基于IEEE 754标准的64位浮点数，无法精确表示超过2^53-1的大整数。 解决方案包括： 1. 使用第三方库（如`json-bigint`）替代原生`JSON.parse`，支持大整数解析。 2. 自定义 reviver 函数，在解析过程中对数字字段进行特殊处理，例如将其转换为字符串以保留精度。 3. 在序列化JSON前，将大整数转换为字符串，避免解析时精度丢失。 例如，使用`json-bigint`库可以轻松解决此问题： ```javascript const JSONbig = require('json-bigint'); const parsedData = JSONbig.parse('{"id": 90071992547409910}'); console.log(parsedData.id); // 输出正确的大整数 ``` 选择合适的方案取决于具体场景和性能需求。

Answer 1

1. 问题概述：JSON.parse后数字类型数据不一致

在JavaScript中，使用`JSON.parse`解析JSON字符串时，可能会遇到数字类型数据不一致的问题。例如，大整数被解析为浮点数，导致精度丢失。这是因为JavaScript中的数字类型基于IEEE 754标准的64位浮点数，无法精确表示超过2^53-1的大整数。

以下是一个简单的例子：

const jsonString = '{"id": 90071992547409910}';
const parsedData = JSON.parse(jsonString);
console.log(parsedData.id); // 输出 90071992547409920，精度丢失
    

这种问题在处理数据库ID、时间戳等大整数场景下尤为常见。

2. 分析过程：为什么会出现精度丢失

JavaScript中的所有数字都以64位浮点数的形式存储，这意味着它只能安全地表示从-(2^53 - 1)到(2^53 - 1)之间的整数值（即-9007199254740991到9007199254740991）。超出这个范围的整数可能会因为舍入误差而导致精度丢失。

以下是分析过程的关键点：

• JSON字符串中的大整数在解析时会被转换为JavaScript的Number类型。
• 如果该整数超出了上述安全范围，则会触发精度丢失。
• 浮点数的表示方式决定了其无法精确存储所有大整数。

因此，解决这一问题需要避免直接将大整数映射到JavaScript的Number类型。

3. 解决方案：如何避免精度丢失

以下是几种常见的解决方案：

1. 使用第三方库：如`json-bigint`，它可以替代原生`JSON.parse`，支持大整数解析。
2. 自定义 reviver 函数：通过`JSON.parse`的第二个参数`reviver`，在解析过程中对数字字段进行特殊处理。
3. 序列化前转换为字符串：在序列化JSON前，将大整数字段转换为字符串，避免解析时精度丢失。

下面分别介绍这三种方法的具体实现：

3.1 使用 `json-bigint` 库

`json-bigint` 是一个专门用于处理大整数的库，能够正确解析JSON字符串中的大整数：

const JSONbig = require('json-bigint');
const jsonString = '{"id": 90071992547409910}';
const parsedData = JSONbig.parse(jsonString);
console.log(parsedData.id); // 输出正确的 90071992547409910
    

此方法的优点是简单易用，无需手动处理每个字段。

3.2 自定义 reviver 函数

通过`JSON.parse`的`reviver`参数，可以在解析过程中对特定字段进行处理：

const jsonString = '{"id": "90071992547409910"}';
const parsedData = JSON.parse(jsonString, (key, value) => {
    if (key === 'id') {
        return BigInt(value); // 将字符串转换为BigInt
    }
    return value;
});
console.log(parsedData.id); // 输出正确的 90071992547409910n
    

此方法适用于需要对特定字段进行处理的场景。

3.3 序列化前转换为字符串

在序列化JSON前，可以将大整数字段转换为字符串：

const data = { id: 90071992547409910 };
const jsonString = JSON.stringify(data, (key, value) => {
    if (key === 'id') {
        return value.toString(); // 转换为字符串
    }
    return value;
});
console.log(jsonString); // 输出 '{"id":"90071992547409910"}'
    

此方法的优点是在解析端无需额外处理，但需要确保序列化端的兼容性。

4. 方案对比与选择

以下是三种方案的对比表格：

方案	优点	缺点	适用场景
使用 `json-bigint`	简单易用，无需手动处理字段	引入外部依赖，可能增加项目复杂度	需要快速解决问题且不介意依赖的场景
自定义 reviver 函数	灵活可控，无需引入外部依赖	需要手动处理每个字段，代码量较大	需要对特定字段进行特殊处理的场景
序列化前转换为字符串	无需修改解析端逻辑，兼容性强	需要确保序列化端和解析端的约定一致	序列化端可控且解析端无需额外处理的场景

选择合适的方案取决于具体需求和项目约束。

5. 流程图：解决方案选择流程

以下是选择解决方案的流程图：

graph TD;
            A[开始] --> B{是否需要快速解决问题？};
            B --是--> C[使用 `json-bigint`];
            B --否--> D{是否需要对特定字段进行特殊处理？};
            D --是--> E[自定义 reviver 函数];
            D --否--> F{是否可以控制序列化端？};
            F --是--> G[序列化前转换为字符串];
            F --否--> H[其他方案];