JavaScript преобразование строки RGB (`rgb (r, g, b)`) в HEX (`# rrggbb`) - PullRequest
Новая
       88

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

1 голос
/ 07 мая 2020

Функция 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)'));

Ответы [ 3 ]

1 голос
/ 07 мая 2020

Вы забыли преобразовать компоненты в number, поэтому вы передаете их как string в componentToHex, что ожидает number.

As String.prototype.split() даст вам 3 string s в этом случае, вы можете использовать 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)'));
1 голос
/ 07 мая 2020

Вы хотите, чтобы числовая часть (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)'));

Также обратите внимание, что вы всегда должны объявлять переменные перед их использованием (иначе ошибки будут выдаваться в строгом режиме, или они будут неявно глобальными, что может вызвать ошибки).

Как вы можете видеть выше, функцию, которая принимает и преобразует входные числа, можно сделать более элегантной, если сопоставить символы di git, сопоставить с componentToHex и затем присоединиться.

0 голосов
/ 07 мая 2020

Попробуйте это - 

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

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

...