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

【问题标题】：JavaScript RGB string (`rgb(r, g, b)`) to HEX (`#rrggbb`) conversionJavaScript RGB 字符串 (`rgb(r, g, b)`) 到 HEX (`#rrggbb`) 转换
【发布时间】：2020-08-22 11:57:11
【问题描述】：

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)'));

【问题讨论】：

val 是一个字符串值。您必须先将其转换为数字，否则toString(16) 不会将其转换为十六进制值（它只会按原样返回值）。
可能是因为您将 val 作为字符串而不是数字传递给 componentToHex？

标签： javascript hex rgb color-scheme color-conversion

【解决方案1】：

在调用toString 之前，您希望数字部分（val）是一个数字。如果它是一个字符串，当你调用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，然后加入，可以使获取和转换输入数字的函数更加优雅。

【讨论】：

【解决方案2】：

您忘记将组件转换为number，因此您将它们作为string 传递给componentToHex，它需要number。

在这种情况下，String.prototype.split() 会给你 3 个 strings，你可以使用 Array.prototype.map() 和 Number() 轻松解析所有 3 个：

function componentToHex(c) {
  // This expects `c` to be a number:
  const hex = c.toString(16);

  return hex.length === 1 ? `0${ hex }` : hex;
}

function rgbToHex(rgb) {
  // .map(Number) will convert each string to number:
  const [r, g, b] = rgb.replace('rgb(', '').replace(')', '').split(',').map(Number);
  
  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}


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

【讨论】：

【解决方案3】：

试试这个 -

let componentToHex = (val) => {
  a = Number(val).toString(16);
  return a.padStart(2, '0');
};

let rgbtohex = (rgb) => {
  hex = rgb.slice(4, -1).split(',');
  return hex.reduce((a, b) => a + componentToHex(b), '#');
};

rgbtohex('rgb(1,255,148)');

（修改为更短）

【讨论】：