在JavaScript中将带有哈希的十六进制字符串转换为带有0x的十六进制值的最佳方法？答案

【问题标题】：Best way to convert hex string with hash to hex value with 0x in JavaScript?在JavaScript中将带有哈希的十六进制字符串转换为带有0x的十六进制值的最佳方法？
【发布时间】：2018-06-16 20:45:52
【问题描述】：

这个问题不是问如何将哈希字符串十六进制值转换为相反的颜色。这个问题是询问如何将哈希字符串十六进制值转换为下面解释的常规十六进制值：

我从元素的存储样式中获取元素的十六进制颜色值。我需要将它们的十六进制值（一个带有“#FFFFFF”之类的哈希的字符串）转换为 0xFFFFFF。最快、最直接的方法是什么？

我想这样做，以便可以对样式的值进行一些按位修改。例如，storedColor ^ 0xFFFFFF 可以得到一个近似的反色。

【问题讨论】：

如果您想反转颜色，这已经回答了here
How can I generate the opposite color according to current color?的可能重复
不，我希望将带有哈希的“#FFFFFF”等文本字符串转换为不带引号或 JavaScript 哈希的 0xFFFFFF 等普通十六进制值。
感谢您的链接。我仍然可以使用它来反转颜色，但它没有回答如何将字符串十六进制转换为常规十六进制。
如果你想用那个字符串做一个数字，试试parseInt(yourString.slice(1), 16)

标签： javascript colors hex

【解决方案1】：

我知道这个答案来得太晚了，但我遇到了类似的问题，这对我有帮助（请注意，下面提供的代码不是我的，这只是多个 StackOverflow 答案的组合）。

一般工作流程：将十六进制代码转换为 RGB，然后转换为 0x 表示。

您可以在此处查看不同的 HEX TO RGB 转换选项：RGB to hex and hex to RGB

我使用了这个函数（很容易反转，因为它返回一个数组 [r, g, b]。也适用于速记十六进制三元组，例如“#03F”）。

hexToRgb(hex) {
  return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
      , (m, r, g, b) => "#" + r + r + g + g + b + b)
      .substring(1).match(/.{2}/g)
      .map(x => parseInt(x, 16));
}

最终转换的想法取自这里：convert rgba color value to 0xFFFFFFFF form in javascript

就像用户@Chanwoo Park 提到的那样，此表示中的颜色 0xFFFFFFFF 形成为 Alpha、Blue、Green、Red 而不是 Alpha、Red、Green、Blue。因此，简单地将颜色 #4286F4 转换为 0xFF4286F4 不会呈现相同的颜色。

您可以做的是反转 RGB 值，然后进行转换。完整代码：

hexToRgb(hex) {
  return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
      , (m, r, g, b) => "#" + r + r + g + g + b + b)
      .substring(1).match(/.{2}/g)
      .map(x => parseInt(x, 16));
},
getFillColor(color) {
  let rgbColor = this.hexToRgb(color);
  let reversed = rgbColor.reverse();
  let hex = 0xff000000 | (reversed[0] << 16) | (reversed[1] << 8) | reversed[2];

  return parseInt(`0x${(hex >>> 0).toString(16)}`);
}

附：这是 Vue.js 代码，但转换为 vanilla JS 应该非常简单。

所有功劳归用户所有：https://stackoverflow.com/users/7377162/chanwoo-park、https://stackoverflow.com/users/10317684/ricky-mo、https://stackoverflow.com/users/3853934/micha%c5%82-per%c5%82akowski

【讨论】：

【解决方案2】：

作为@georg commented:

...，试试parseInt(yourString.slice(1), 16)

【讨论】：