Преобразование строки JavaScript RGB (`rgb (r, g, b)`) в HEX (`# rrggbb`)

Question

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

Answer 1

Вы забыли преобразовать компоненты в 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)'));

Answer 2

Вам нужна числовая часть (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, а затем присоединиться.

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

(Изменено, чтобы стало короче)