背景

后端使用雪花算法生成的id，在接口文檔測(cè)試中，響應(yīng)體中正常顯示。

在后續(xù)測(cè)試中，卻出現(xiàn)通過(guò)id查不到數(shù)據(jù)的情況，通過(guò)打開(kāi)瀏覽器控制臺(tái)（F12）發(fā)現(xiàn)，響應(yīng)和預(yù)覽中的數(shù)據(jù)不一致。

從下面圖片可以看出，響應(yīng)中JSON格式的數(shù)據(jù)是正常的，但是在預(yù)覽中卻出現(xiàn)跟原id不一致的情況，且通過(guò)分析發(fā)現(xiàn)只有最后兩位不一致，這里明顯出現(xiàn)了精度丟失

這里的id是正常的

在這里出現(xiàn)了精度丟失

問(wèn)題分析

1. JavaScript 的數(shù)字精度限制

JavaScript 使用 IEEE 754 雙精度浮點(diǎn)數(shù)格式表示所有數(shù)字，這意味著：

• 它能準(zhǔn)確表示的整數(shù)范圍是 -2^53 + 1 到 2^53 - 1（即 -9007199254740991 到 9007199254740991）
• 你的 ID 1922304585509261314 已經(jīng)超過(guò)了這個(gè)范圍（2^53 = 9007199254740992）

2. 當(dāng)數(shù)字超過(guò)安全整數(shù)范圍時(shí)

超出 Number.MAX_SAFE_INTEGER（即 2^53 - 1）的數(shù)字會(huì)出現(xiàn)精度丟失（前端測(cè)試）：

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

為什么預(yù)覽顯示不正確？

開(kāi)發(fā)工具（如瀏覽器控制臺(tái)、Postman等）在顯示 JSON 響應(yīng)時(shí)，會(huì)自動(dòng)將數(shù)字類型的值轉(zhuǎn)換為 JavaScript 數(shù)字，從而導(dǎo)致精度丟失。實(shí)際響應(yīng)數(shù)據(jù)可能是正確的，但顯示時(shí)被轉(zhuǎn)換了。

解決方案

后端解決方案：

代碼

SpringBoot中可以通過(guò)編寫JsonConfig處理json精度丟失的配置，將Long類型轉(zhuǎn)化為String類型

@JsonComponent
public class JsonConfig {

    /**
     * 添加 Long 轉(zhuǎn) 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 注解

• 這個(gè)注解是 Spring Boot 提供的，用于標(biāo)記一個(gè)類作為 Jackson 的序列化/反序列化組件。
• 被標(biāo)記的類會(huì)自動(dòng)注冊(cè)到 Spring 的 Jackson ObjectMapper 中，全局生效。

2. JsonConfig 類

public class JsonConfig {

• 這是一個(gè)配置類，專門用于自定義 Jackson 的 JSON 序列化行為。

3. jacksonObjectMapper 方法

@Bean
public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {

• @Bean 表示這個(gè)方法會(huì)返回一個(gè)由 Spring 管理的 Bean（這里是 ObjectMapper）。
• Jackson2ObjectMapperBuilder 是 Spring Boot 提供的工具類，用于方便地配置 ObjectMapper。

4. 創(chuàng)建和配置 ObjectMapper

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

• 通過(guò) builder 創(chuàng)建一個(gè)新的 ObjectMapper 實(shí)例，并禁用 XML 映射功能（createXmlMapper(false)）。

5. 注冊(cè)自定義序列化模塊

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

• SimpleModule：是 Jackson 提供的模塊，用于自定義序列化/反序列化規(guī)則。
• module.addSerializer：

• • Long.class：針對(duì)包裝類型的 Long。
  • Long.TYPE：針對(duì)基本類型的 long。
  • ToStringSerializer.instance：將 Long 值直接轉(zhuǎn)換為字符串（而不是數(shù)字），避免精度丟失。

• objectMapper.registerModule(module)：將配置好的模塊注冊(cè)到 ObjectMapper。

6. 返回配置好的 ObjectMapper

return objectMapper;

• 最終返回定制化的 ObjectMapper，Spring 會(huì)用它來(lái)處理所有 JSON 序列化/反序列化。

修改后測(cè)試

id已經(jīng)轉(zhuǎn)為字符串，顯示正常，無(wú)精度丟失

總結(jié)

• JavaScript 的 Number 類型無(wú)法安全表示超過(guò) 53 位的整數(shù)（2^53），而 Java 的 Long 是 64 位。
• 如果直接將 Long 作為數(shù)字序列化到 JSON，前端 JavaScript 解析時(shí)可能會(huì)丟失精度（例如 1234567890123456789 可能變成 1234567890123456800）。
• 解決方案：將 Long 序列化為字符串（如 "1234567890123456789"），前端可以通過(guò)字符串解析避免精度問(wèn)題。

到此這篇關(guān)于js精度丟失解決方案的文章就介紹到這了,更多相關(guān)js精度丟失解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論