将十亿级字符串存入JavaScript/Angular数字数组时出现异常问题

问题场景 #

我有一个对象数组，其中value字段是可能大于或小于十亿的字符串值。循环遍历数组将这些字符串存入number[]类型的valueArray时，超过十亿的值会莫名变成错误数值（比如1000000001变成1），数亿级数值则正常。使用parseInt转换的代码如下：

(response) => {
  response.forEach(element => {
    this.valueArray.push(parseInt(element.value))
  })
}

API返回的对象示例：{ hamburgers: '7', hotdogs: '9', feelings: 'strong', value: '9000000000' }

valueArray用于填充Chart.js柱状图，错误数值会导致图表显示完全异常。我曾尝试通过字符串长度判断转换Number或BigInt，但返回NaN，代码如下：

if(element.value.length < 10) {
  this.value.push(Number(element.value))
  return;
}
else if(element.value.length > 9) {
  this.value.push(Number(BigInt(element.value)))
}
break;

问题原因 #

1. JavaScript的Number类型是双精度浮点数，仅能精确表示-2^53到2^53（即±9007199254740992）范围内的整数。虽然十亿（10^9）在这个范围内，但如果数值超过该范围，用parseInt或Number转换会丢失精度，出现错误值。
2. 你尝试的代码中，Number(BigInt(element.value))返回NaN的核心原因：当BigInt的值超出Number的精确范围时，无法安全转换为Number类型，直接转换会返回NaN。

解决方案 #

方案1：直接使用BigInt（推荐，兼容新版Chart.js）

新版本Chart.js已支持BigInt类型，直接将字符串转为BigInt存入数组即可彻底避免精度丢失：

response.forEach(element => {
  this.valueArray.push(BigInt(element.value));
});

方案2：数值单位转换（兼容旧版Chart.js）

如果Chart.js不支持BigInt，可将大数转换为以十亿/亿为单位的浮点数，同时调整图表刻度标签匹配单位：

response.forEach(element => {
  const bigNum = BigInt(element.value);
  // 转换为以十亿为单位的浮点数，保留2位小数
  this.valueArray.push(Number(bigNum / BigInt(1000000000)));
});

在Chart.js的Y轴配置中，将刻度标签修改为{ value }十亿的形式，确保数据展示逻辑一致。

方案3：安全判断转换范围

通过判断数值是否在Number的安全范围内，选择对应的转换方式：

response.forEach(element => {
  const bigNum = BigInt(element.value);
  const minSafe = BigInt(Number.MIN_SAFE_INTEGER);
  const maxSafe = BigInt(Number.MAX_SAFE_INTEGER);
  
  if (bigNum >= minSafe && bigNum <= maxSafe) {
    // 在安全范围内，转为Number类型
    this.valueArray.push(Number(bigNum));
  } else {
    // 超出范围，使用BigInt或单位转换
    this.valueArray.push(bigNum);
    // 或选择单位转换：this.valueArray.push(Number(bigNum / BigInt(1000000000)));
  }
});

错误代码分析 #

你之前的代码存在两个问题：

1. 通过字符串长度判断数值范围的方式不可靠，带前导零的字符串、负数都会导致判断错误；
2. Number(BigInt(...))在数值超出Number安全范围时必然返回NaN，这是JavaScript类型转换的规则限制。

内容的提问来源于stack exchange，提问作者Doug Rosenberg