Long类型参数传到前端精度丢失

在日常开发中，我们经常发现Long类型传送到前端，会出现精度丢失的现象，
那么如何在javascript中处理Long类型的精度丢失现象呢?下文笔者将一一道来，如下所示

常见的Long类型前端精度丢失的实现思路

方式1:
   将Long类型转换为字符串

方式2：
   使用JSON库的方式，传送Long类型传送到前端

---

例

1.将`Long`类型转换为字符串

在后端将`Long`类型转换为字符串
  前端接收到字符串后再进行处理
   采用此种方法可确保数值精确性 

 后端示例(Spring Boot)
 
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class LongController {

    @GetMapping("/long-value")
    public String getLongValue() {
        long longValue = 1234567890123456789L;
        return String.valueOf(longValue);
    }
}
 
 前端示例(JavaScript)
 
fetch('/long-value')
    .then(response => response.text())
    .then(data => {
        console.log(data); // 输出: "1234567890123456789"
        // 如果需要将其转换为数字，可以使用 BigInt
        const bigIntValue = BigInt(data);
        console.log(bigIntValue); // 输出: 1234567890123456789n
    })
    .catch(error => console.error('Error:', error));

2.使用`BigInteger`类型

在后端
  使用`BigInteger`类型来处理大整数
  并将其转换为字符串传递给前端

后端示例(Spring Boot)

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.math.BigInteger;

@RestController
public class BigIntegerController {

    @GetMapping("/big-integer-value")
    public String getBigIntegerValue() {
        BigInteger bigIntegerValue = new BigInteger("1234567890123456789");
        return bigIntegerValue.toString();
    }
}
 

前端示例(JavaScript)
 
fetch('/big-integer-value')
    .then(response => response.text())
    .then(data => {
        console.log(data); // 输出: "1234567890123456789"
        // 如果需要将其转换为数字，可以使用 BigInt
        const bigIntValue = BigInt(data);
        console.log(bigIntValue); // 输出: 1234567890123456789n
    })
    .catch(error => console.error('Error:', error));

3.使用JSON库支持大整数

某些 JSON 库支持将大整数作为字符串处理，以避免精度丢失。


后端示例(Spring Boot)

使用`Jackson`库时
  默认情况下会将`Long`类型转换为字符串 
 
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class LongController {

    @GetMapping("/long-value")
    public Long getLongValue() {
        return 1234567890123456789L;
    }
}
 

前端示例(JavaScript)
 
fetch('/long-value')
    .then(response => response.json())
    .then(data => {
        console.log(data); // 输出: "1234567890123456789"
        // 如果需要将其转换为数字，可以使用 BigInt
        const bigIntValue = BigInt(data);
        console.log(bigIntValue); // 输出: 1234567890123456789n
    })
    .catch(error => console.error('Error:', error));

4.自定义序列化器

如果需要更复杂的处理逻辑
  自定义`Long`类型序列化器

后端示例(Spring Boot)
 
import com.fasterxml.jackson.core.JsonGenerator;
import com.fasterxml.jackson.databind.JsonSerializer;
import com.fasterxml.jackson.databind.SerializerProvider;
import com.fasterxml.jackson.databind.module.SimpleModule;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.converter.json.Jackson2ObjectMapperBuilder;

import java.io.IOException;

@Configuration
public class JacksonConfig {

    @Bean
    public Jackson2ObjectMapperBuilder objectMapperBuilder() {
        Jackson2ObjectMapperBuilder builder = new Jackson2ObjectMapperBuilder();
        SimpleModule module = new SimpleModule();
        module.addSerializer(Long.class, new JsonSerializer<Long>() {
            @Override
            public void serialize(Long value, JsonGenerator gen, SerializerProvider serializers) throws IOException {
                gen.writeString(value.toString());
            }
        });
        builder.modules(module);
        return builder;
    }
}
 

前端示例(JavaScript)
 
fetch('/long-value')
    .then(response => response.json())
    .then(data => {
        console.log(data); // 输出: "1234567890123456789"
        // 如果需要将其转换为数字，可以使用 BigInt
        const bigIntValue = BigInt(data);
        console.log(bigIntValue); // 输出: 1234567890123456789n
    })
    .catch(error => console.error('Error:', error));