解决 JavaScript Number 精度问题:处理超大 Long 类型 ID

在前后端交互中,常常需要传递 Long 类型的 ID。但 JavaScript 的 Number 类型基于 IEEE 754 标准,最大只能精确表示 15 到 17 位的整数,超过这个范围会丢失精度。为了避免这种问题,本文介绍如何处理超大数字。

问题描述

JavaScript 的 Number 类型的最大安全整数是 9007199254740991,超过这个值的数字会出现精度丢失。例如,1234567890123456789 会被转为 1234567890123456700,导致错误。

问题的根源

Long 类型是许多后端语言(如 Java)用于表示大整数的类型,而 JavaScript 的 Number 类型不能正确表示如此大的数字。

ini 复制代码
// 后端:Java
Long longId = 1234567890123456789L;

前端接收到该 ID 后,会出现精度丢失:

javascript 复制代码
// 前端:JavaScript
let itemId = 1234567890123456789;  // 错误,精度丢失
console.log(itemId);  // 输出:1234567890123456700

解决方案

Long 类型 ID 转为字符串,并确保前后端都使用字符串形式传递 ID,避免精度丢失。

  • 后台 :将 Long 类型 ID 转为字符串。
  • 前端 :接收 ID 时保持字符串类型,避免转换为 Number

实施方案

后端(Java 示例):
less 复制代码
@RestController
public class ItemController {
    @GetMapping("/items/{id}")
    public ResponseEntity<ItemVO> getItem(@PathVariable Long id) {
        Item item = itemService.getItemById(id);
​
        ItemVO itemVO = new ItemVO();
        itemVO.setId(String.valueOf(id));
​
        return ResponseEntity.ok(itemVO);
    }
}
前端(JavaScript 示例):
javascript 复制代码
// 使用 axios 请求 API
axios.get('/api/items/1234567890123456789')
  .then(response => {
    const itemId = response.data.id;  // 保持为字符串
    console.log(itemId);  // 输出原始字符串
  })
  .catch(error => {
    console.error('Error:', error);
  });
相关推荐
老毛肚10 小时前
jeecg-boot-base-core 02 day
javascript·python
烬羽15 小时前
后端返回的 JSON 字符串,浏览器怎么"看懂"的?——Ajax 全链路拆解
javascript
半个落月15 小时前
一个新手用 Bun + Axios 调通 DeepSeek API 的实践记录
javascript
不好听61316 小时前
深入理解链表:线性数据结构的另一面
javascript·数据结构
林希_Rachel_傻希希16 小时前
学React治好了我的焦虑症,1小时速通React 前20分钟。
前端·javascript·面试
小林ixn16 小时前
从 Ajax 到异步编程:JSON 序列化、Event Loop 与 XHR 请求完全解析
javascript
丷丩17 小时前
MapLibre GL JS第47课:添加动画图标
javascript·gis·动画·mapbox·maplibre
快乐的哈士奇17 小时前
【Next.js实战①】Gmail API 按柜号检索邮件:OAuth 双 Cookie 与搜索 Fallback
开发语言·javascript·ecmascript
云水一下17 小时前
Vue.js从零到精通系列(五):全局状态管理——Pinia 核心与实践
前端·javascript·vue.js
kmblack118 小时前
javascript计算年龄
开发语言·javascript·ecmascript