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

我知道这个答案来得很晚,但我有一个类似的问题,这对我有帮助(请注意,下面提供的代码不是我的,这只是多个StackOverflow答案的组合)。

常规工作流:将十六进制代码转换为RGB,然后转换为0x表示。

您可以在此处检查不同的十六进制到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提到的一样,此表示中的颜色0xFFFFFF的形式为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)}`);
}

P、 这是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

作为@乔治 commented :

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