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

在对其调用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，然后连接，可以使获取和转换输入数字的函数更加优雅。

Answer 2

您忘记将组件转换为number，所以您将它们作为string传递给componentToHex，这需要一个number。

在这种情况下，由于String.prototype.split()将为您提供3个string，因此您可以将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 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)');

(将其修改为更短(