JavaScript 练手小技巧：#RRGGBB 和 rgb(255,255,255）颜色代码相互转换

看到有人在 CSDN 上写颜色的转换代码，突发奇想，用 JavaScript 也写一个。

一、相关知识点

（1）常用颜色代码方式，有两种 #RRGGBB 和 rgb(255,255,255)

1. 用 #RRGGBB 规定十六进制颜色，其中 RR（红色）、GG（绿色）和 BB（蓝色）十六进制整数指定颜色的成分（分量）。所有值必须在 00 到 FF 之间。
2. rgb(255,255,255)，三个 0-255 的颜色值，分别是对应 #RRGGBB 的 RR（红色）、GG（绿色）和 BB（蓝色）。

此外，用  #RRGGBB 表示颜色，可以简写为 #RGB。

（2）JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。

0xff // 255，十六进制
0o377 // 255，八进制
0b11 // 3，二进制

（3）在 JavaScript 无论哪种方式表示颜色，都是字符串数据。

二、颜色转换实现

let c1 = "#ff3";
let c2 = "rgba(4,0,0)";
function toRGB(color){
    // 截取 #RRGGBB 除了 # 号以外的子串。
    let str = color.substr(1);
    switch (str.length) {
        case 3 : str = str[0]+str[0]+str[1]+str[1]+str[2]+str[2];
                 break;
        case 6 : str = str ;
                 break;
        default :
            console.info("数据错误");
            return false;
    }
    // 十六进制数据前面必须有 0x
    let R = Number("0x"+str.substr(0,2));
    let G = Number("0x"+str.substr(2,2));
    let B = Number("0x"+str.substr(4,2));
    return `rgb(${R},${G},${B})`;
}

function toRRGGBB(color){
    // 利用正则获取 rgb(255,255,255) 里的所有数字。
    let nums = color.match(/\d+/g);  // 数字字符串数组
    let RR = Number(nums[0]).toString(16);  // 转为数字后，再转为十六进制的字符串
    RR = RR.length<2 ? "0"+RR:RR;
    let GG = Number(nums[1]).toString(16);
    GG = GG.length<2 ? "0"+GG:GG;
    let BB = Number(nums[2]).toString(16);
    BB = BB.length<2 ? "0"+BB:BB;
    return "#"+RR+GG+BB ;
}

console.info( toRGB(c1) );
console.info( toRRGGBB(c2) );

用到的主要知识点：

1.字符串的方法 substr 用来截取子串。

// 截取 #RRGGBB 除了 # 号以外的子串。
    let str = color.substr(1);

2.把 十六进制的数据转为 十进制数据。

let R = Number("0x"+str.substr(0,2));

3.利用正则表达式，抓取字符串中的所有数字，得到包含数字字符串的数组。

 // 利用正则获取 rgb(255,255,255) 里的所有数字。
let nums = color.match(/\d+/g);  // 数字字符串数组