js如何处理json的long类型

JavaScript中如何正确处理JSON的Long类型数据

在前后端数据交互中,JSON（JavaScript Object Notation）因其轻量级、易解析的特性，成为最常用的数据交换格式之一，JSON本身只支持少数几种基本数据类型（如字符串、数字、布尔值、null、数组和对象），而许多后端语言（如Java、Go等）拥有更丰富的数值类型（如Java的long），当后端返回包含long类型的数据时，直接序列化为JSON可能会导致前端JavaScript处理时出现问题，本文将探讨JavaScript处理JSON中long类型数据的常见问题及解决方案。

为什么JSON的Long类型在JavaScript中会有问题？

1 数据类型差异

在Java等强类型语言中,long类型是64位有符号整数，取值范围为-2^63到2^63-1（即-9223372036854775808到9223372036854775807），而JavaScript中的Number类型基于IEEE 754双精度浮点数标准，只有53位有效数字（包括符号位和指数位），能够精确表示的安全整数范围是-2^53到2^53-1（即-9007199254740992到9007199254740991）。

当JSON中的数值超出JavaScript Number的安全整数范围时，直接解析会导致精度丢失，Java的long值9223372036854775807（即2^63-1）在JSON中会被表示为9223372036854775807，但JavaScript解析后会将其近似为9223372036854776000，精度发生了变化。

2 JSON规范的限制

JSON标准（RFC 8259）中，数值类型没有区分整数和浮点数，所有数值都统一为number类型，这意味着后端无法通过JSON本身直接表达“这是一个64位整数”的语义，前端只能通过数值范围或上下文判断其类型，增加了处理难度。

常见问题场景

1 后端返回Long类型，前端解析精度丢失

Java后端有一个long类型的字段：

public class Order {
    private long orderId = 9223372036854775807L;
    // getters and setters
}

序列化为JSON后：

{"orderId": 9223372036854775807}

前端JavaScript通过JSON.parse()解析后：

const order = JSON.parse('{"orderId": 9223372036854775807}');
console.log(order.orderId === 9223372036854775807); // false
console.log(order.orderId); // 9223372036854776000 (精度丢失)

2 前端计算错误

精度丢失会导致基于该数值的计算结果异常。

const num = 9223372036854775807;
console.log(num + 1); // 预期 9223372036854775808，实际 9223372036854776000

3 ID等关键字段异常

在业务场景中,long类型常用于ID、时间戳等关键字段，精度丢失可能导致ID重复、时间解析错误等问题，甚至引发数据不一致。

解决方案

1 方案一：后端转换为字符串（推荐）

核心思路：后端在序列化JSON时，将long类型字段转换为字符串类型，前端解析后保持字符串形式，需要计算时再处理。

实现方式

• Java后端：使用@JsonFormat注解或自定义序列化器，将long转为String。

  import com.fasterxml.jackson.annotation.JsonFormat;
  public class Order {
      @JsonFormat(shape = JsonFormat.Shape.STRING)
      private long orderId = 9223372036854775807L;
      // getters and setters
  }

  序列化后的JSON：

  {"orderId": "9223372036854775807"}

• 前端处理：

  const order = JSON.parse('{"orderId": "9223372036854775807"}');
  console.log(order.orderId); // "9223372036854775807" (字符串，无精度丢失)
  // 需要计算时，可转换为BigInt（ES2020+）
  const orderIdNum = BigInt(order.orderId);
  console.log(orderIdNum + BigInt(1)); // 9223372036854775808n

优点

• 从源头避免精度丢失,前端无需额外处理类型转换。
• 字符串形式兼容所有JSON解析器,无兼容性问题。

缺点

• 需要后端配合修改代码,增加少量开发成本。
• 前端若需直接进行数值计算,需手动转换为BigInt（ES2020+支持）。

2 方案二：前端使用BigInt处理

核心思路：前端遇到可能超出Number安全范围的JSON数值时，通过自定义解析逻辑将其转换为BigInt类型。

实现方式

• 自定义JSON.parse扩展，或使用reviver参数：

  const safeParse = (jsonStr) => {
    return JSON.parse(jsonStr, (key, value) => {
      // 判断是否为长整数字符串（如后端未转字符串，数值超出安全范围）
      if (typeof value === 'number' && !Number.isSafeInteger(value)) {
        return BigInt(value.toString()); // 转为BigInt
      }
      return value;
    });
  };
  // 测试
  const json = '{"orderId": 9223372036854775807}';
  const order = safeParse(json);
  console.log(order.orderId); // 9223372036854775807n (BigInt类型)

优点

• 无需修改后端代码,适用于无法控制后端的情况。
• BigInt能精确表示任意大的整数，彻底解决精度问题。

缺点

• BigInt与Number不兼容，无法直接混合运算（如BigInt + Number会报错）。
• 需要前端手动处理类型转换,增加代码复杂度。
• 旧版浏览器（如IE11）不支持BigInt，需通过Babel转译或Polyfill兼容。

3 方案三：前端使用第三方库

核心思路：借助成熟的第三方库（如long.js、bigint.js）处理大整数，简化前端逻辑。

实现方式（以long.js为例）

• 安装库：

  npm install long

• 使用示例：

  const Long = require('long');
  const json = '{"orderId": 9223372036854775807}';
  const order = JSON.parse(json, (key, value) => {
    if (typeof value === 'number' && !Number.isSafeInteger(value)) {
      return Long.fromNumber(value);
    }
    return value;
  });
  console.log(order.orderId); // Long { low: -1, high: 2147483647, unsigned: false }
  console.log(order.orderId.toString()); // "9223372036854775807"

优点

• 提供丰富的API（如加、减、比较等），简化大整数操作。
• 兼容旧版浏览器,无需担心BigInt的兼容性问题。

缺点

• 需要引入额外的库,增加项目体积。
• 学习成本,需库的使用方式。

4 方案四：约定数值范围+前端校验

核心思路：前后端约定，超出Number安全范围的数值必须以字符串形式返回，前端通过校验机制确保数据格式正确。

实现方式

• 约定文档中明确：“所有可能超过Number安全整数范围（±2^53）的数值字段，后端必须返回字符串类型。”

• 前端通过校验工具检查数值类型：

  const validateLongField = (value) => {
    if (typeof value === 'number' && !Number.isSafeInteger(value)) {
      console.warn('数值超出安全范围，可能存在精度丢失:', value);
      return false;
    }
    return true;
  };
  // 在接口响应拦截器中调用
  const response = { orderId: 9223372036854775807 };
  if (!validateLongField(response.orderId))