后端返回长数字前端显示异常
后台返回长串数字 ID 在前端显示错误(通常表现为精度丢失、末尾几位变成 0 或科学计数法),根本原因是 JavaScript 的 Number 类型有最大安全整数限制(2⁵³-1,即 16 位),而后端返回的雪花 ID 或 Long 型 ID 常常达到 19 位,导致溢出。 [1, 2]
核心原因
- 精度丢失:JavaScript 无法精确解析超过 16 位的纯数字。
- 现象:F12 的 Network 中看接口原始数据完全正确,但一绑定到前端页面或传入后续请求时就发生了改变。 [1]
解决方法## 1. 后端修改(推荐)
- 转为字符串:在后端将 Long 类型的 ID 字段使用 @JsonSerialize(如 Jackson)转为 String 类型再返回给前端。
- 全局配置:在 Spring Boot 等框架中添加全局 JSON 序列化配置,自动把所有的 Long/long 转为字符串。 [1, 3, 4]
2. 前端修改
- 使用 json-bigint:如果使用 Axios,可以替换默认的 JSON 解析库为 json-bigint,它能把大数字解析为内部的 BigNumber 对象,避免溢出。
- 正则替换:在响应拦截器里用正则表达式给响应文本中的长数字两端加上双引号,将其转为字符串后再 JSON.parse。 [1, 5]
如果你能告诉我你们项目使用的技术栈(例如:后端是 Java/Spring Boot 还是 前端是 Vue/React),我可以为你提供具体的代码配置片段。
[1] https://juejin.cn [2] https://juejin.cn [3] https://www.cnblogs.com [4] https://cloud.tencent.com [5] https://blog.csdn.net