JSON.parse()大整数精度丢失的问题和解决方法

小白终成大白


文章目录


前言

调试代码时候感觉出鬼了

接口给我的

javascript 复制代码
console.log(extra);
const extraObj = JSON.parse(extra)
console.log(extraObj);
```javascript
在这里插入代码片

我打印出来

{"contentId":1996543874746863617,"commentId":1996544548632276994}

明明是3617打出来就是3600

打出来就是3600

我天呐 当时脑子嗡一下 怎么事 出鬼了

一、原因

数字在JSON.parse之后被近似了!

这是因为JavaScript的Number类型有精度限制。JavaScript的Number类型使用IEEE 754双精度浮点数,它的精度范围大约是-253到253之间。超过这个范围的整数可能无法精确表示,会被近似处理。后端数据提供的contentId是1996543874746863617,这个数字明显超过了2^53(约9e15),所以在JSON.parse的时候会被近似。

二、解决办法

可以把大数字作为字符串处理,或者使用BigInt类型

1.引入库

c 复制代码
pnpm add json-bigint

我这个项目不想引入新的库了 所以选择了第二种

2.字符串处理

c 复制代码
// 处理大整数精度丢失问题:将JSON字符串中的大整数转换为字符串
		const safeJsonStr = extra.replace(/"contentId":(\d+)/g, '"contentId":"$1"').replace(/"commentId":(\d+)/g, '"commentId":"$1"');
		const extraObj = JSON.parse(safeJsonStr)
		console.log(extraObj);
		const id = extraObj.contentId
		console.log(id);

这回打印就没有出现问题了


总结

记录一下自己的问题 加深处理印象

感谢观看

相关推荐
奔跑的呱呱牛16 小时前
arcgis-to-geojson双向转换工具库
arcgis·json
武超杰18 小时前
SpringMVC核心功能详解:从RESTful到JSON数据处理
后端·json·restful
还是大剑师兰特2 天前
Vue3 前端专属配置(VSCode settings.json + .prettierrc)
前端·vscode·json
qq_283720052 天前
Cesium实战(三):加载天地图(影像图,注记图)避坑指南
json·gis·cesium
雷帝木木2 天前
Flutter for OpenHarmony:Flutter 三方库 cbor 构建 IoT 设备的极致压缩防窃协议(基于标准二进制 JSON 表达格式)
网络·物联网·flutter·http·json·harmonyos·鸿蒙
长安11082 天前
JsonCpp的编译与使用
json
凌晨一点的秃头猪2 天前
JSON 文件基础介绍
json
凌晨一点的秃头猪2 天前
Python JSON 模块核心函数超详细指南
json
小江的记录本2 天前
【JWT】JWT(JSON Web Token)结构化知识体系(完整版)
前端·网络·web安全·http·网络安全·json·安全架构
早點睡3902 天前
ReactNative项目OpenHarmony三方库集成实战:react-native-json-tree
react native·react.js·json