解决页面JS接受Long型损失精度问题(最新解决方案)

在前后端分离的架构下，我们经常需要通过网络传输Long类型的数据，在前端进行处理。但是，由于JS中Number类型采用IEEE 754双精度浮点数表示，会存在精度损失的问题。而Long类型的数据更倾向于采用Java或C++等强类型语言进行处理，因此我们需要找到一种前端解决方案。

方案一：采用BigInt

BigInt是JS的一个新类型，用于表示任意长度的整数。在ES10中引入，Chrome从67版本开始支持。我们可以将Long类型数据打包为64个二进制位，通过BigInt实例化转换为JS的BigInt类型，从而避免精度损失。

function fromLong(long) {
  let buffer = new ArrayBuffer(8);
  let dataView = new DataView(buffer);
  dataView.setBigUint64(0, long);
  let low = dataView.getUint32(0);
  let high = dataView.getUint32(4);
  let result = BigInt(high * 0x100000000 + low);
  return result;
}

let longVal = 17285819855;
let bigIntVal = fromLong(longVal);
console.log(bigIntVal); // BigInt("17285819855")

方案二：采用字符串

另一个常见的方案是将Long型数据转换为字符串，比较推荐的转换方式是将数值转换为十六进制，然后进行前/后端之间的传输。前端收到后端数据后，再将字符串转换为JS中的Number类型。

let longVal = 17285819855;
// 转换为16进制字符串
let hexString = longVal.toString(16);
console.log(hexString); // "feeda22f"

// 传输过程中hexString可能会被截断
// 传输后，将hexString转换为Long
let longValFromHex = BigInt("0x" + hexString);
console.log(longValFromHex); // BigInt("17285819855")

两种方案的具体选择要根据业务需求和兼容性等方面因素综合考虑。以上是本文的完整攻略，希望能对大家有所帮助！