求助：JavaScript中十六进制颜色字符串转整数出现异常

我明白你的问题了——你已经能把数据库里的颜色整数转成十六进制字符串，但反过来把十六进制颜色转成对应的整数时，用parseInt(color.substr(1), 16)得到的结果和你数据库里的数值不匹配（比如#ff0000转出来是16711680，但你数据库里是-65536）。这其实是JavaScript处理整数时的有符号/无符号差异导致的，我来帮你解决这个问题：

问题根源 #

当你用parseInt("#ff0000".substr(1), 16)时，解析的是无符号十六进制数0xFF0000，它的十进制值是16711680。但你数据库里的-65536是把这个值当作32位有符号整数的结果（32位有符号整数的范围是-2^31到2^31-1，0xFF0000超过了最大值0x7FFFFFFF，所以会被解释为负数）。

解决方案：十六进制颜色转32位有符号整数 #

我们需要把解析出来的无符号数值转换成32位有符号整数。可以通过判断数值是否超过32位有符号整数的最大值，若超过则减去0x100000000（即2^32）来得到对应的负数：

function hexToColorInt(colorStr) {
  // 移除#号，确保只处理十六进制部分
  const hexPart = colorStr.replace(/^#/, '');
  // 解析为无符号十六进制数值
  let unsignedNum = parseInt(hexPart, 16);
  // 转换为32位有符号整数
  if (unsignedNum > 0x7FFFFFFF) {
    unsignedNum -= 0x100000000;
  }
  return unsignedNum;
}

测试这个函数：

console.log(hexToColorInt("#ff0000")); // 输出 -65536，和你数据库里的数值一致

验证双向转换的正确性 #

为了确保你的整数转十六进制函数也能正确匹配，这里给你一个完善后的getHexColor函数（如果你的现有函数有问题的话），它能把32位有符号整数正确转成6位十六进制颜色：

function getHexColor(colorInt) {
  // 将整数转换为32位无符号整数，然后提取RGB部分（后6位）
  const hex = ((colorInt >>> 0) & 0xFFFFFF).toString(16).padStart(6, '0');
  return `#${hex}`;
}

测试双向转换：

const originalNum = -65536;
const hexStr = getHexColor(originalNum); // 得到 "#ff0000"
const convertedNum = hexToColorInt(hexStr); // 得到 -65536，和原始数值一致

为什么parseInt不符合预期？ #

简单来说，parseInt不会自动处理有符号整数的边界。当解析的十六进制值超过0x7FFFFFFF（2147483647）时，JavaScript会把它当作普通的无符号整数存储，而数据库里的颜色值是按32位有符号整数存储的，所以两者就会出现差异。我们上面的函数就是手动处理了这个边界转换。

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