左移运算符将颜色的RGB值转为HEX值【十六进制颜色显示】

左移运算符 <<

左移运算符（<<）表示将一个数的二进制值向左移动指定的位数，尾部补0，即乘以2的指定次方。向左移动的时候，最高位的符号位是一起移动的。

左移运算符作为位运算符，只对整数起作用，如果进行运算的值不是整数，会自动转换为整数，javascript以64位浮点数形式进行储存。做位运算时，是以32位整数进行运算，运算返回值也是32位的整数。

思维过程及代码实现

左移过程必丢失位数，rgb的三个整数值至少需要24位的空间，这时数值1的32位恰好可以充分利用。

//左移运算符作用的是32位整数
//数值1的32位
0000 0000 0000 0000 0000 0000 0000 0001
// 1<<24，后头有24位的空间
0000 0001 0000 0000 0000 0000 0000 0000
// 假设r为255， r<<16
0000 0001 1111 1111 0000 0000 0000 0000
// 假设g为255， g<<8
0000 0001 1111 1111 1111 1111 0000 0000
// 假设b为255， b<<0，取整
0000 0001 1111 1111 1111 1111 1111 1111
// toString()转化为16进制，一开始的数值1化成的字符串不会影响后头的字符串，且0转化过程在最高位会省略
"1FFFFFF"
// 去除字符串的最高位，返回后面六个字符串
"FFFFFF"

代码实现：

var color = {r:89,g:28,b:155};
//RGB to HEX
var rgb2hex = function(r,g,b) {
    return '#'+ ((1<<24)+(r<<16)+(g<<8)+b)
    .toString(16)//转成16进制，返回字符串
    .substr(1);//去除字符串的最高位，返回后面六个字符串
}
rgb2hex(color.r,color.g,color.b);
// 输出："#591c9b"

// 或者直接用rgb的数值进行左移即可，因为用的是二进制的位进行相加，这样就不用去掉最高位
//RGB to HEX
var rgb2hex1 = function(r,g,b) {
    return '#'+ (+(r<<16)+(g<<8)+b)
    .toString(16)//转成16进制，返回字符串
}
rgb2hex1(color.r,color.g,color.b);
// 输出："#591c9b"