1.问题描述

在处理后端返回的大数值 ID (如雪花算法生成的 ID)时，由于 JavaScript 的数值类型限制，会出现精度丢失问题。

例如:

- 后端返回 ID: 1896824604274593792

- 前端显示 ID: 1896824604274593800

2.原因分析

1. JavaScript 使用 64 位浮点数(IEEE 754)存储数字

2. 可以精确表示的最大整数是 2^53 - 1 (Number.MAX_SAFE_INTEGER = 9007199254740991)

3. 超过这个范围的整数会失去精度

3.解决方案

使用 BigInt 类型处理大数值 ID:

// 列表数据处理
this.merchantList = response.rows.map(row => {
  const idStr = row.id ? BigInt(row.id).toString() : '';
  return {
    ...row,
    id: idStr
  };
});

// 修改操作
const id = row.id ? BigInt(row.id).toString() : '';
getMerchant(id).then(response => {
  this.form = {
    ...response.data,
    id: response.data.id ? BigInt(response.data.id).toString() : ''
  };
});

4.关键点

1. 所有涉及 ID 操作的地方都需要使用 BigInt 处理

2. BigInt 处理后要使用 toString() 转为字符串

3. 确保 ID 在前端始终以字符串形式存储和传输

5.最佳实践

1. 在数据入口处就将大数值 ID 转换为字符串

2. 所有涉及 ID 的操作都使用字符串形式

3. 与后端交互时保持 ID 的字符串形式

4. 添加适当的错误处理和空值检查

备选方案

如果环境不支持 BigInt，可以直接使用字符串处理:

const idStr = row.id ? row.id.toString() : '';

确保后端返回的 ID 也是字符串格式