JavaScript中怎么处理后端返回的高精度长整型JSON数字防止前端精度丢失

落晨大大_2677

落晨大大_2677

2026-07-23

774人浏览

原创

后端将高精度长整型转为字符串返回是最稳妥方案,因 javascript number 精度上限为 ±9,007,199,254,740,991;前端应保持字符串使用,必要时用 bigint 运算,禁用 number()、+、parseint 等强制转换。

javascript中怎么处理后端返回的高精度长整型json数字防止前端精度丢失

JavaScript 中处理后端返回的高精度长整型(如 Java 的 Long、C# 的 long 或数据库中的 BIGINT)时,直接解析 JSON 会导致精度丢失,根本原因是 JavaScript 的 Number 类型基于 IEEE 754 双精度浮点数,安全整数范围仅为 -(2^53 - 1) 到 2^53 - 1(即 ±9,007,199,254,740,991)。超出该范围的整数(例如雪花 ID、订单号、用户 ID 等)在解析后末尾数字可能被“四舍五入”或归零。

后端主动转为字符串返回

最推荐、最稳妥的方案:后端在序列化 JSON 时,将高精度长整型字段统一转为字符串。这样前端拿到的就是原始字符串,完全规避精度问题。

  • Java(Jackson)示例:用 @JsonSerialize(using = ToStringSerializer.class) 注解标记字段,或全局配置 ObjectMapper 对 Long 类型启用字符串序列化
  • Spring Boot 可通过 @Configuration 添加 SimpleModule,注册 Long → String 序列化器
  • Node.js(Express + JSON.stringify)可借助 replacer 函数对特定字段做 String(value) 处理
  • 前端无需额外解析,直接使用 data.id(字符串),需要参与计算时再用 BigInt(data.id) 或保持字符串比较(如 ID 匹配、URL 参数等)

前端自定义 JSON 解析逻辑

若无法修改后端,可在前端接管 JSON 解析过程,识别并保留大数字为字符串。

  • 使用 JSON.parse(text, reviver) 的 reviver 回调函数,对数值类型做范围判断:若 typeof value === 'number' 且 !Number.isSafeInteger(value),则返回原字符串(需配合后端在 JSON 中保留原始字符串形式,或预处理文本)
  • 更可靠的做法是:后端在 JSON 中用特殊标记(如 "id": {"$numberLong": "12345678901234567890"}),前端 reviver 检测该结构并提取字符串
  • 注意:JSON.parse 默认仍会把纯数字字面量转成 Number,所以此法依赖后端配合格式改造,不能仅靠原始数字字面量挽救

使用 BigInt 进行运算(仅限需要计算场景)

当必须对大整数做算术运算(如递增 ID、比较大小)时,可用 BigInt,但要注意兼容性和限制。

  • 将字符串转为 BigInt("12345678901234567890123"),支持加减乘除、取模、位运算等
  • BigInt 不能与 Number 混合运算(会报错),所有操作数都得是 BigInt
  • 不支持 Math 方法(如 Math.floor)、不能用于 JSON.stringify(会抛异常),需手动转回字符串存储或展示
  • 兼容性:现代浏览器基本支持(Chrome 67+、Firefox 68+、Safari 14+),IE 完全不支持;服务端 Node.js ≥ v10.4.0

避免反模式:不要用 Number() 或 + 强转

常见错误写法:Number(jsonStr.id)、+jsonStr.id、parseInt(jsonStr.id) —— 这些都会立即触发精度丢失,即使原始字符串是精确的。

  • parseInt("90071992547409919") 返回 90071992547409920(已失真)
  • Number("90071992547409919") 同样返回 90071992547409920
  • 只要经过 Number 类型,就落入 IEEE 754 表达极限,无法挽回
  • 正确做法:全程保持字符串,仅在必要时用 BigInt 构造

Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2603

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6630

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6066

10

python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2603

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5643

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6630

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6318

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

903

5

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

5126

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 12.3万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.7万人学习