实现颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF'

基本概念：

在前端开发的时候，会遇到颜色相关的表示，在计算机中，表示颜色通常使用 HEX、RGB 和 HSL 这三种方法。

HEX：是用六个十六进制的数字来表示颜色。每两个数字代表 红、绿和蓝三个颜色通道。例如 #FF0000 表示红色。

RGB：是指使用红、绿和蓝三个通道中的十进制数字值来表示颜色，每个通道的值在 0 到 255 之间。例如 RGB(255, 0, 0) 表示红色;

HSL：是使用色相(Hue)、饱和度(Saturation)和亮度(Lightness)三个参数来表示颜色。色相是一个在0到360之间的角度值，表示颜色在色轮上额位置。饱和度和亮度是在0到100%的范围内的百分比值，表示颜色的纯度和亮度。例如HSL(0, 100%, 50%)表示红色。

问题分析：

rgb(255, 255, 255) -> #FFFFFF 从 RGB 到 HEX 表示颜色概念，可以分析出，就是 十进制 转换成 十六进制。

解决方式：

1.使用字符串拼接

255 -> FF 数字到十六进制 String.toString(16)。不够两位的前边补个0。

function rgbToHex1(rgbStr) {
    const [r, g, b] = rgbStr.match(/\d+/g).map(Number);

    const hexR = r.toString(16).padStart(2, '0');
    const hexG = g.toString(16).padStart(2, '0');
    const hexB = b.toString(16).padStart(2, '0');

    return `#${hexR}${hexG}${hexB}`
}

rgbToHex1('rgb(255,255,255)')

2. 使用位运算

在JavaScript 内部，数值都是以64 位浮点数的形式存储的，但是在做位运算的时候，是以32位带符号的整数进行运算的，并且返回值也是一个32位带符号的整数。
使用 << 和 | 来进行位运算，按照十六进制来移动位置，然后再用16进制数字表示。

可以先看一下移位运算符

let r = 255, 
    g = 255, 
    b = 255;

console.log('r2 = ', r.toString(2))
console.log('r16 = ', (r << 16).toString(2))

console.log('g2 = ', g.toString(2))
console.log('g16 = ', (g << 8).toString(2))

console.log('b2 = ', b.toString(2))

实现代码

function rgbToHex2(rgbStr) {
    const [r, g, b] = rgbStr.match(/\d+/g).map(Number);
    return `#${((r << 16) | (r << 8) | g).toString(16).padStart(6, '0')}`
}

let a = rgbToHex2('rgb(255,255,255)')
// let a = rgbToHex2('rgb(0,0,0)');
console.log(a)

参考资料： 位运算符在JS中的妙用 juejin.cn/post/684490…