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

Question

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

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

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

Answer 1

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

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

您可以在此处检查不同的十六进制到 RGB 转换选项：RGB 到十六进制和十六进制到 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、蓝色、绿色、红色，而不是 Alpha、红色、绿色、蓝色。因此，简单地将颜色 #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 代码，但转换为普通 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

Answer 2

正如@georg 评论：

...，尝试一下

parseInt(yourString.slice(1), 16)

Answer 3

我只是把这个留在这里。 如果你有值 #ffffff 说来自颜色选择器 但需要在值中输入0xffffff 例如“two.js : scene .color”需要十六进制颜色代码 但是 type="color" 的 html "" 是一个 #hex 代码

var bgColor = #ffffff;
bgColor.replace("#", "0x"); 
scene.color = bgColor;