关于浏览器传参丢失精度的问题的解决办法

今天在写项目时候，需要前端传一个 number 类型的参数，可能由于类型过长，url接收时候直接丢失了精度，导致了一系列的错误

前端源码

const doEdit = () => {
  console.log(p.value.id)
  router.push({
    path: '/add',
    query: {
      id: p.value.id
    },
  })
}

这里用控制台打印了 p.value.id 来确认是否是后端传参前端接收时丢失了精度，但是控制台打印是正常的结果 1927331787680264194, 但是看浏览器重重定向的地址为 http://localhost:8081/api/get/vo?id=1927331787680264200 明显是这里出现了问题

问题出在 JavaScript 的数值精度限制上。JavaScript 使用 IEEE 754 双精度浮点数表示数字，最大可精确表示的整数是 2^53 - 1（约 16 位数字或 ±9007199254740991）所以出现了精度丢失的问题

解决方案

解决问题很简单 String(p.value.id) 只需把高精度的数字转换成 string 类型传入即可

如无特殊说明 关于浏览器传参丢失精度的问题的解决办法 为博主 Lin 原创，转载请注明原文链接: https://blog.lin03.cn/archives/10/