将16进制的颜色转为rgb颜色

在前端面试过程中，常常会遇到这样一种类型的题目：

使用js将16进制的颜色值转为rgb颜色！

反而在项目中，不怎么遇到这种问题，也很少有这种需求的项目。

但毕竟面试中常常遇到，我自己在之前的面试的时候，也遇到了这个题目，那就写一下吧，当做熟悉这个过程了！

function colorToRGB(color) {
    var color1, color2, color3;
    color = ""+color;
    if (typeof color !== "string") return;
    if (color.charAt(0) == "#") {
      color = color.substring(1);
    }
    var not16num = color.split("").filter(function (item, index) {
      return isNaN(parseInt(item, 16))
    });
    if(not16num.length) return; 
    switch (color.length) {
      case 3:
        color1 = color.substr(0,1);
        color2 = color.substr(1,1);
        color3 = color.substr(2,1);
        color1 = color1 + color1;
        color2 = color2 + color2;
        color3 = color3 + color3;
      break;
      case 6:
        color1 = color.substr(0,2);
        color2 = color.substr(2,2);
        color3 = color.substr(4,2);
      break;
      default:
      return false;
    }
    color1 = parseInt(color1, 16);
    color2 = parseInt(color2, 16);
    color3 = parseInt(color3, 16);
    return "rgb("+color1+","+color2+","+color3+")";
  }

　　考虑到通用性， 就定义一个colorToRGB函数吧，将16进制的颜色值当做参数传入。

　　首先需要将参数转为字符串类型的，'color = ""+color;'

　　检查第一个字符是否为"#"， 如果第一个字符为“#”，截取“#”之后的字符，判断当前color的位数，需要考虑到色值是可以简写为3位的，如果是3位颜色值，每一位重复一次代表一个颜色，例如#fff，其实是#ffffff的简写，然后分别取得rgb三个色值：color1, color2, color3。

　　到这一步之后，就没什么了，剩下的就是拼接rgb色值了。

　　其中：

    var not16num = color.split("").filter(function (item, index) {
      return isNaN(parseInt(item, 16))
    });
    if(not16num.length) return; 

　　这一步是检查，传入的参数是否是一个符合规范的16进制的数值，如果不是16进制数值，那后续的任何操作就没有任何意义了。

　　我这里使用的方法是，把字符串全部截断，然后判断每一个字符是否为16进制数值，如果不是16进制的数字，则返回给变量not16num，如果最终not16num存在值，表示color不是一个16进制数字，则直接返回。

　　虽然目的达成了，但是我始终感觉这个方法不是很好，需要再考虑。

 

　　仔细思考一番后，自我修改：

function colorToRGB(color) {
    var color1, color2, color3;
    color = ""+color;
    if (typeof color !== "string") return;
    if (color.charAt(0) == "#") {
      color = color.substring(1);
    }
    if (color.length == 3) {
      color = color[0]+color[0]+color[1]+color[1]+color[2]+color[2];
    }
    if (/^[0-9a-fA-F]{6}$/.test(color)) {
      color1 = parseInt(color.substr(0,2), 16);
      color2 = parseInt(color.substr(2,2), 16);
      color3 = parseInt(color.substr(4,2), 16);
      return "rgb("+color1+","+color2+","+color3+")";
    }
} 

　　如果是3位简写的颜色值，则修改为6位颜色值。

　　利用正则对颜色值进行匹配，如果是16进制的数值，则将其转为rgb颜色值，看起来比前面的方法顺眼多了！