【实战】前端 JS 解决 JSON 序列化精度丢失问题

小渣渣

需求：做了一个在线解析 jwt 的页面，当 jwt 内容有 long 类型的时候，使用默认的 JSON 方法解析会导致精度丢失，如下图：

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYW1lIjoiaXRzdnNlLmNvbSIsImlkIjo4OTA2MTM1NDg4MDEwNzc5Mjg1fQ.7tJHcSfbpZkgqw0ALGSRxyqkz2-UxZPhO_12TuKNZus

JavaScript 只有一种数字类型：Number，Number是双精度浮点数，与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。因此在JavaScript中，数字不分为整数类型和浮点类型，所有的数字都是浮点类型。

在表达整数时，Number能表示的整数范围是[−2的53次方,2的253次方]。因为Number有8个字节64位，其中包括1位符号位，11位指数位，52位尾数位。

可以用Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER查看最大安全整数、最小安全整数。

后端接口返回 long 类型的字段时候，前端使用 JSON.parse(text) 方式反序列化的显示的时候，会造成显示错误，解决方案就是后端接口将 long 类型的字段转换成 string 类型进行返回。

lossless-json 项目，解析 JSON 而不会有丢失数字信息的风险。GitHub 地址：https://github.com/josdejong/lossless-json

首先，克隆 lossless-json 项目，构建一个捆绑和缩小的库（ES5，电脑需要安装 node.js），首先安装一次依赖项：

登录可见。

然后编译，如下：

登录可见。

./dist/lossless-json.js这将生成一个可以在浏览器和 node.js 中执行的 ES5 兼容包。

通过浏览器控制台测试如下：



修改项目代码，引入 lossless-json.js 文件，调用 LosslessJSON 进行 JSON 序列化和反序列化，修复精度丢失问题，如下图：

let json = LosslessJSON.parse('{"foo":"bar"}'); // {foo: 'bar'}
let text = LosslessJSON.stringify(json);        // '{"foo":"bar"}'

测试地址：https://down.itsvse.com/tools/jwt.html

最后，附上编译后的 lossless-json.js 文件：

游客，如果您要查看本帖隐藏内容请回复

（完）

飞鱼

又来学习学习。。。