当前位置: 首页 > article >正文

前后端传输 Long 类型数据时(时间戳,雪花算法ID),精度丢失的根本原因

前后端传输 Long 类型数据时,精度丢失的根本原因是 JavaScript 的 Number 类型无法精确表示超过 53 位(64 位双精度浮点数)的整数,而 Java 的 Long 类型是 64 位整数。当后端返回的 Long 值超过 2^53-1(即 9007199254740991)时,前端解析会出现精度错误。

解决方案

方案一:后端将 Long 转为字符串(推荐)

后端修改(Spring Boot 示例)

  1. 局部方案:在字段上添加 @JsonFormat 注解

    public class UserDTO {@JsonFormat(shape = JsonFormat.Shape.STRING)private Long id; // 自动序列化为字符串
    }

  2. 全局方案:配置 Jackson 序列化规则

    @Configuration
    public class JacksonConfig {@Beanpublic Jackson2ObjectMapperBuilder jacksonBuilder() {Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder();// 所有 Long 类型转为字符串builder.serializerByType(Long.class, ToStringSerializer.instance);return builder;}
    }
     

前端处理
直接使用字符串类型的 ID,避免用 Number 类型解析:

javascript

// 正确:后端返回 { "id": "1234567890123456789" }
fetch('/api/user').then(res => res.json()).then(data => {const userId = data.id; // 直接作为字符串使用console.log(userId); // "1234567890123456789"});

方案二:前端特殊处理大整数

使用 JSON.parse 自定义解析(需确保后端不转字符串):

// 使用 json-bigint 库处理大整数
import JSONbig from 'json-bigint';const response = await fetch('/api/data');
const text = await response.text();
const data = JSONbig.parse(text); // 自动将大数字转为 BigInt 类型// 使用示例
console.log(data.id.toString()); // 转为字符串操作

方案三:后端使用 String 类型代替 Long

从根本上避免问题:

public class UserDTO {private String id; // 直接定义为字符串类型
}

关键原因说明

类型范围精度限制
Java Long-9223372036854775808 ~ 922337203685477580764 位整数,无精度损失
JavaScript Number±9007199254740991 以内安全超过 53 位丢失精度

最佳实践

  1. 优先推荐方案一:后端统一将 Long 序列化为字符串,前端按字符串处理。

  2. 若前端需数值运算:将字符串转为 BigInt(注意浏览器兼容性):

    const bigIntId = BigInt("1234567890123456789"); // 字符串转BigInt
  3. 避免使用 Number() 或 parseInt() 转换大数字符串,否则仍会丢失精度。

通过统一数据类型定义(字符串传输),可彻底解决此问题,同时保持数据精确性。

http://www.lryc.cn/news/2392149.html

相关文章:

  • 探索容器技术:Docker与Kubernetes的实践指南
  • Ubuntu从0到1搭建监控平台:本地部署到公网访问实战教程Cpolar穿透与Docker部署全过程
  • vscode java debug terminal 中文乱码
  • 3D PDF如何制作?SOLIDWORKS MBD模板定制技巧
  • Qt DateTimeEdit(时间⽇期的微调框)
  • C# 类和继承(屏蔽基类的成员)
  • 基于qt5和stk10开发的互联调试
  • matlab雷达定位仿真
  • 基于vue框架的动物园饲养管理系统a7s60(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
  • MySQL 索引和事务
  • BERT分类器和朴素贝叶斯分类器比较
  • WPS自动换行
  • C#面向对象核心:类继承详解
  • maven中的grpc编译插件protobuf-maven-plugin详解
  • 服务发现Nacos
  • 社群分享:义乌|杭州电商|店群卖家,私域鱼塘运营的排单系统开源|私域鱼塘运营|返款软件开源
  • C#回调函数深度解析
  • 通义智文开源QwenLong-L1: 迈向长上下文大推理模型的强化学习
  • HTTP代理的实际用处有哪些?HTTP代理强在哪里?
  • 低代码——表单生成器以form-generator为例
  • 【Vue Vapor Mode :技术突破与性能优化的可能性】
  • Parasoft C++Test软件单元测试_常见问题及处理
  • vue渲染数组各子项实现文本超出宽度显示tooltip
  • libreoffice容器word转pdf
  • AI模型升级与机器人产业落地同步推进
  • 安全编码与AI接口权限控制
  • linux centos 服务器性能排查 vmstat、top等常用指令
  • MySQL----视图的创造和使用
  • c/c++的opencv伽马噪声
  • LiveGBS国标视频平台收流模式:UDP、TCP被动与TCP主动传输模式之差异剖析