背景

当前端使用 js 解析 JSON 数据中的大整数（-2^53 ~ 2^53范围之外的整数）时，会遇到精度丢失的问题，为了避免这个问题，我们可以将 JSON 数据中的大整数设置为 String 类型，但这仅限数据源受我们控制的时候，有时我们会遇到不得不在前端处理大整数的情况，例如接口由第三方控制的。

解决方案

为了解决这类情况，本文提供两种解决方案，通过 Json-bigint 框架处理和 JSON.parse()新特性处理。

1、json-bigint 框架

安装依赖

1

npm install json-bigint

使用框架解析 JSON 数据

1
2
3
4
5
6
7

const JSONbig = require('json-bigint');
 
const json = '{"value": 9223372036854775807,"v2": 123}';
console.log('Input:', json);
 
const r = JSONbig.parse(json);
console.log('JSONbig parse(input) value:', r.value.toString());

2、JSON.parse()

标准内置对象 JSON 的 JAON.parse()方法的第二个参数 reviver 函数，如果指定了他，解析值会经过一次转换后才将被最终返回。在某次更新后，reviver 的参数由 2 个增加到了 3 个，新增的这个参数可以让我们获取到解析之前的原始 JSON 值，这样我们就可以在 reviver 函数中对大整数进行处理，像下面这样：

1
2

let jsonStr = '{"bigint": 12345678901234567890}';
let jsonObj = JSON.parse(jsonStr, (_, v, o) -> {return typeof v === 'number' ? o.source : v});

但是该特性在比较新的浏览器版本才会得到支持，可以看到我在本地测试时，在 Edge 中成功了但 Chrome 中失败了。该特性的兼容性情况如下：

小结

本文介绍了两种在前端处理 JSON 数据中大整数的方法，json-bigint 框架和 JSON.parse()函数，前者需要引入新的依赖，后者需要高版本浏览器的支持，需要根据实际情况选择合适的方法。