问题

在公司项目中，后端使用 Go 返回一个 int64 类型的 ID 给前端。浏览器开发者工具里看到返回 JSON 正常，但页面展示来的数值却与预期相差甚远。话说回来，你是否也遇到过这样“数字变形”的尴尬场景？这一次我把它拆解开来让你一眼看清原因。

本地复现

环境

• 说到后端，Go 1.x
• 从前端来看，Chrome / Edge

项目结构

blog-demo/
├── main.go # 后端
└── index.html # 前端页面

. 后端 main.go

package main
import (
"encoding/json"
"fmt"
"net/http"
"time"
)
type User struct {
ID int64 `json:"id"`
}
func userHandler {
fmt.Printf.Format,r.URL.Path)
w.Header.Set
w.Header.Set
// 模拟业务中常见的大整数。例如雪花 ID
user := User{ID: 1234567890123456789}
data,_ := json.Marshal
fmt.Printf.Format,string)
w.Write
}
func main {
http.HandleFunc
http.Handle))
println
println
http.ListenAndServe
}

. 前端 index.html

直接 JSON.parse 大整数，立即看到精度丢失：







方式一：页面加载自动执行，无需后端
{
const json = '{"id":1234567890123456789}';const expected = '1234567890123456789';const user = JSON.parse;const equal = String === expected;const diff = equal?按理说，'' : BigInt - BigInt;document.getElementById.textContent =
'原始 JSON 文本: ' + json + '
' +
'JSON.parse 后: ' + user.id + '
' +
至于'预期值。' + expected + '
' +
'精度丢失的观点是，' +;})，
 // **方式二**：请求后端并解析
async function fetchUser {
const result = document.getElementById;try {
const response = await fetch;const text = await response.text;const user = JSON.parse;result.textContent =
'原始 JSON: ' + text + '
' +
'解析后 ID: ' + user.id + '
' +
'预期 ID: '
+ ' : '') + '
' +
== String?'精度丢失:' :
'');} catch {
result.textContent =
再看`错误，请先启动后端
` +
e.message;}
}

运行演示步骤

1. 启动后端： `go run main.go`
2. 打开浏览器： 访问 
3. 查看效果： * 页面自动展示 “方式一” 的精度丢失 * 点击按钮触发 “方式二”，确认从接口得到的数据一样存在精度问题。

简化版 Demo

在浏览器控制台直接验证：

const json = '{"id":1234567890123456789}';const user = JSON.parse;console.log，// 输出：1234567890123456768
console.log);// false，JS 字面量已落入安全范围之外
console.log === "1234567890123456789");// false，这才是正确判断方法

原因分析

JavaScript 的内置数值类型 Number 是 IEEE‑754 双精度浮点数。它只能准确表示从 – +  范围内的整数，也就是约 ±9 007 199 254 740 991。超过这个范围时就会出现“进位误差”，导致数值被截断或四舍五入。

方法

#方案一这方面，后端返回字符串

`int64` 在 Go 中保留为原始数值。但我们把它转成字符串再序列化：

type User struct {
ID string json:"id"   // 改为 string
}
...
user := User{ID:"1234567890123456789"}
data,_的观点是，=json.Marshal
// ...
// 前端收到的是字符串，可放心使用：
const idStr = JSON.parse.id;// 如需做算术，可用 BigInt：
const bigId = BigInt;不过，console.log;// ➜ 1234567890123456790n
此方法不依赖任何第三方库，兼容所有现代浏览器和旧版 IE6+。它避免了所有潜在的浮点误差——因为数字已经完全脱离了 Number 范围。

bash

#方案二这方面，前端使用 json-bigint 库

如果你倾向于让前后统一使用 JavaScript 原生类型。也可以在前段引入专门处理大整数的库：

bash npm install json-bigint # 或 yarn add json-bigint

javascript import JSONBig from ‘json-bigint’;

// 用于解析包含大整数的 API 响应 const bigObj = JSONBig.parse;// bigObj.id 是 BigInt 类型，可直接做运算： console.log);// “1234567890123456789”

此方案适合已有大量 JS/TS 项目且想统一使用 JSONBig 的情况。至于但需要注意，

• 对于服务器返回 非整数 或 小数 时需要额外配置。
• 若后台仍以 Number 发回，则无法解决。说起来，

说到#方案三，改用 Snowflake / UUID 并保持为字符串

如果业务场景允许。可以考虑：

• Snowflake的主键天然是唯一且可排序；将其视作字符串传输即可，
• UUID 一样可以作为全局唯一标识符，并保持为纯文本。

这样既能避免“大数字导致的问题”，又能提高跨程序一致性。

• #ID字段最好用*字符串*；避免浮点误差和跨语言兼容性问题。
• #JavaScript 中若需做算术，请务必使用*BigInt*；ES2020+ 原生支持，无需额外依赖。
• #数据库主键尽量选用*Snowflake*/UUID 或者自增 bigint 且通过*string* 传输。
• #如果项目已有大量 JS 数组/对象交互，可考虑统一使用*json-bigint* 或自定义解析工具包。
• #定期检查 API 文档与前后分离团队沟通，确保所有字段类型声明清晰、版本同步。
• #单元测试时加入对大整数边界值测试，提前捕捉潜在溢出风险。
• #配合 CI 自动化检测，如 Jest/A 对结果进行 assert).toBe) 验证。话说回来，
• #若部署旧版浏览器环境。请通过 polyfill 或服务层转码保证兼容性。
• #生产环境监控日志中关注异常字段长度超标、NaN 等异常状态，以防止因误转换导致业务错误。
• #文档说明建议包含示例代码片段，让团队成员快速了解最佳实现方式。
]