时间戳

首页 > 解决方案 > JavaScript RGB 字符串 (`rgb(r, g, b)`) 到 HEX (`#rrggbb`) 转换

javascript - JavaScript RGB 字符串 (`rgb(r, g, b)`) 到 HEX (`#rrggbb`) 转换

问题描述

该componentToHex功能适用​​于第一个组件r，但对于其他两个组件，g并且b，它不能按预期工作：

let componentToHex = (val) => {
  const a = val.toString(16);
  return a.length === 1 ? "0" + a : a;
};

let rgbToHex = (rgb) => {
  const hex = rgb.replace("rgb(", "").replace(")", "").split(",");
  const r = hex[0];
  const g = hex[1];
  const b = hex[2];

  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

console.log(rgbToHex ('rgb(1,255,148)'));

标签： javascripthexrgbcolor-schemecolor-conversion

解决方案

在调用它之前，您希望数字部分 (the val) 是一个数字toString。如果您调用它时它是一个字符串toString，它将保持原样：

let componentToHex = (val) => {
  const a = Number(val).toString(16);
  //        ^^^^^^^^^^^
  return a.length === 1 ? "0" + a : a;
}
let rgbtohex = (rgb) => {
  return '#' + rgb
    .match(/\d+/g)
    .map(componentToHex)
    .join('');
}


console.log(rgbtohex('rgb(1,255,148)'));

另请注意，您应该始终在使用变量之前声明它们（否则将在严格模式下抛出错误，或者它们将是隐式全局的，这可能会导致错误）。

正如您在上面看到的，通过匹配数字字符、映射到componentToHex，然后加入，可以使获取和转换输入数字的函数更加优雅。

推荐阅读