2025-05-30 12:14

Long类型数值在前端JavaScript中精度丢失问题

王姐姐

全栈开发

(42)

(0)

收藏

针对Long类型数值在前端JavaScript中精度丢失问题,共有以下解决方案及对应实现方式:

一、后端处理方案

1. 字符串序列化传输‌

手动转换‌:直接将Long类型转为字符串返回

Map<String, Object> result = new HashMap<>();
result.put("id", yourLongValue.toString()); // 转为字符串传输:ml-citation{ref="1,5" data="citationList"}

2. 注解标注‌:使用Jackson的@JsonSerialize注解

@JsonSerialize(using = ToStringSerializer.class)
private Long id; // 自动序列化为字符串:ml-citation{ref="2,5" data="citationList"}

3. 全局配置‌:Jackson强制所有数字转为字符串

# Spring Boot配置
spring:
  jackson:
    generator:
      write_numbers_as_strings: true  # 适用于全量处理

4. 数据分割传输‌

将Long拆分为高低位传输(需前后端协商):

long value = 1924389676747931650L;
int highBits = (int)(value >> 32);
int lowBits = (int)(value & 0xFFFFFFFFL); // 拆分高低位

二、前端处理方案

1. BigInt原生支持‌

JavaScript直接使用BigInt()解析字符串:

const response = await fetch('/api/data');
const data = await response.json();
const accurateId = BigInt(data.id); // 精确处理大整数

2. 第三方库处理‌

使用bignumber.js或json-bigint库增强精度:

import JSONbig from 'json-bigint';
const parsedData = JSONbig.parse(response.data); // 自动处理大整数:ml-citation{ref="6,12" data="citationList"}

三、其他优化方案

1 JSON序列化库配置‌

通过自定义序列化器处理特定字段或全局类型:

// 自定义序列化器示例
public class CustomSerializer extends JsonSerializer<Long> {
    @Override
    public void serialize(Long value, JsonGenerator gen, SerializerProvider provider) {
        gen.writeString(value.toString()); // 自定义序列化逻辑:ml-citation{ref="6,7" data="citationList"}
    }
}

2 现代数据格式支持‌

采用Protobuf或Avro等支持大整数的序列化格式替代JSON。

四、最佳实践推荐

优先字符串传输‌:后端字段统一转为字符串兼容性最佳

前端BigInt处理‌:若需保持数值类型,使用BigInt原生方案

全局配置优化‌:通过Jackson统一配置减少代码侵入性

通过以上方案可彻底解决Long类型精度丢失问题,具体选择需根据项目架构和前后端协作方式决定。

0条评论

点击登录参与评论