js精度丢失解决方案(响应和预览数据不一致)

背景

后端使用雪花算法生成的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"），前端可以通过字符串解析避免精度问题。

到此这篇关于js精度丢失解决方案的文章就介绍到这了,更多相关js精度丢失解决内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！