js精度丢失（响应和预览数据不一致）

汪了吧

已于 2025-05-15 14:01:21 修改

阅读量950

点赞数 28

文章标签： javascript 开发语言 ecmascript

于 2025-05-15 13:59:00 首次发布

本文链接：https://blog.csdn.net/weixin_46483660/article/details/147981551

版权

背景

问题分析

1. JavaScript 的数字精度限制

3. jacksonObjectMapper 方法

4. 创建和配置 ObjectMapper

5. 注册自定义序列化模块

6. 返回配置好的 ObjectMapper

修改后测试

总结

背景

后端使用雪花算法生成的id，在接口文档测试中，响应体中正常显示。

在后续测试中，却出现通过id查不到数据的情况，通过打开浏览器控制台（F12）发现，响应和预览中的数据不一致。

从下面图片可以看出，响应中JSON格式的数据是正常的，但是在预览中却出现跟原id不一致的情况，且通过分析发现只有最后两位不一致，这里明显出现了精度丢失

这里的id是正常的

在这里出现了精度丢失

问题分析

1. JavaScript 的数字精度限制

JavaScript 使用 IEEE 754 双精度浮点数格式表示所有数字，这意味着：

它能准确表示的整数范围是 -2^53 + 1 到 2^53 - 1（即 -9007199254740991 到 9007199254740991）
你的 ID 1922304585509261314 已经超过了这个范围（2^53 = 9007199254740992）

2. 当数字超过安全整数范围时

超出 Number.MAX_SAFE_INTEGER（即 2^53 - 1）的数字会出现精度丢失（前端测试）：

const bigId = 1922304585509261314;
console.log(bigId); // 输出 1922304585509261300

为什么预览显示不正确？

开发工具（如浏览器控制台、Postman等）在显示 JSON 响应时，会自动将数字类型的值转换为 JavaScript 数字，从而导致精度丢失。实际响应数据可能是正确的，但显示时被转换了。

解决方案

后端解决方案：

代码

SpringBoot中可以通过编写JsonConfig处理json精度丢失的配置，将Long类型转化为String类型

@JsonComponent
public class JsonConfig {

    /**
     * 添加 Long 转 json 精度丢失的配置
     */
    @Bean
    public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {
        ObjectMapper objectMapper = builder.createXmlMapper(false).build();
        SimpleModule module = new SimpleModule();
        module.addSerializer(Long.class, ToStringSerializer.instance);
        module.addSerializer(Long.TYPE, ToStringSerializer.instance);
        objectMapper.registerModule(module);
        return objectMapper;
    }
}

代码解释

1. `@JsonComponent` 注解

这个注解是 Spring Boot 提供的，用于标记一个类作为 Jackson 的序列化/反序列化组件。
被标记的类会自动注册到 Spring 的 Jackson ObjectMapper 中，全局生效。

2. `JsonConfig` 类

public class JsonConfig {

这是一个配置类，专门用于自定义 Jackson 的 JSON 序列化行为。

3. `jacksonObjectMapper` 方法

@Bean
public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {

@Bean 表示这个方法会返回一个由 Spring 管理的 Bean（这里是 ObjectMapper）。
Jackson2ObjectMapperBuilder 是 Spring Boot 提供的工具类，用于方便地配置 ObjectMapper。

4. 创建和配置 `ObjectMapper`

ObjectMapper objectMapper = builder.createXmlMapper(false).build();

通过 builder 创建一个新的 ObjectMapper 实例，并禁用 XML 映射功能（createXmlMapper(false)）。

5. 注册自定义序列化模块

SimpleModule module = new SimpleModule();
module.addSerializer(Long.class, ToStringSerializer.instance);
module.addSerializer(Long.TYPE, ToStringSerializer.instance);
objectMapper.registerModule(module);

SimpleModule：是 Jackson 提供的模块，用于自定义序列化/反序列化规则。
module.addSerializer：

- Long.class：针对包装类型的 Long。
- Long.TYPE：针对基本类型的 long。
- ToStringSerializer.instance：将 Long 值直接转换为字符串（而不是数字），避免精度丢失。

objectMapper.registerModule(module)：将配置好的模块注册到 ObjectMapper。

6. 返回配置好的 `ObjectMapper`

return objectMapper;

最终返回定制化的 ObjectMapper，Spring 会用它来处理所有 JSON 序列化/反序列化。

修改后测试

id已经转为字符串，显示正常，无精度丢失

总结

JavaScript 的 Number 类型无法安全表示超过 53 位的整数（2^53），而 Java 的 Long 是 64 位。
如果直接将 Long 作为数字序列化到 JSON，前端 JavaScript 解析时可能会丢失精度（例如 1234567890123456789 可能变成 1234567890123456800）。
解决方案：将 Long 序列化为字符串（如 "1234567890123456789"），前端可以通过字符串解析避免精度问题。