十六进制颜色值和rgb颜色值互相转换
在之前的一篇文章《将16进制的颜色转为rgb颜色》中，曾经写过将16进制的颜色转换为rgb颜色。
当然了，今天再看，还是有很多可以优化的地方，所以对之前的代码重构了一遍，并且同时写了一个反向转换（也就是将rgb颜色值转换为字符串形式的16进制的颜色值）函数。
16进制转换rgb：
function transferColorToRgb(color) {
if (typeof color !== \'string\' && !(color instanceof String)) return console.error("请输入16进制字符串形式的颜色值");
color = color.charAt(0) === \'#\' ? color.substring(1) : color;
if (color.length !== 6 && color.length !== 3) return console.error("请输入正确的颜色值")
if (color.length === 3) {
color = color.replace(/(\w)(\w)(\w)/, \'$1$1$2$2$3$3\')
}
var reg = /\w{2}/g;
var colors = color.match(reg);
for (var i = 0; i < colors.length; i++) {
colors[i] = parseInt(colors[i], 16).toString();
}
return \'rgb(\' + colors.join() + \')\';
}
调用时，参数形式可以为带“#”号，也可以不带，实际颜色值可以为3位，也可以为6位，如： “#ffffff”、”#fff”、”ffffff”、”fff”。
其中涉及到了利用正则表达式对3位16进制的颜色值转换为6位的数值。
color.replace(/(\w)(\w)(\w)/, \'$1$1$2$2$3$3\')
rgb颜色值转为为16进制的颜色值：
function transferRgbToStr(color) {
if (typeof color !== \'string\' && !(color instanceof String) || !~color.indexOf(\'rgb\')) return console.error("请输入rgb形式的颜色值");
color = color.replace(/\s+/g, \'\');
var index = color.indexOf(\'(\') + 1;
//注意： String 的slice方法，slice方法参数为负数时，即为倒数
// substring 方法参数为负数时，全都认为是0
var colors = color.slice(index, -1).split(\',\').slice(0, 3);
for (var i = 0; i < colors.length; i++) {
if (parseInt(colors[i], 10) > 255 || parseInt(colors[i], 10) < 0)
return console.error("颜色值范围在0到255之间，请注意输入值！")
colors[i] = parseInt(colors[i], 10).toString(16);
if (colors[i].length === 1) {
colors[i] = "0" + colors[i]
}
}
return colors.join("");
}
调用时，参数形式可以为带“rgb()”形式的，也可以为”rgba()”形式的数据，如： rgb(122,23,1) 、rgba(123,23,12,0.5)。
需要注意的是：
var colors = color.slice(index, -1).split(\',\').slice(0, 3);
这一句代码当中，有两个slice方法，一个是字符串方法，一个是数组方法，尽管他们的用法一样，仍然需要谨慎。
还涉及到了String方法中的substring和slice方法使用上的区别，主要是参数为负数时，两者不同的处理方式。slice当做倒数，也就是从后往前数，而sunstring则完全认作是0。请在不同的场景下正确使用两个方法。
版权声明：本文为zhuhuoxingguang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。