颜色十六进制转换rgb编码实现思路
今天在某网上做面试题的时候,发现一道颜色进制转换的题目
题目如下:
请编写一个JavaScript函数toRgb,它的作用是转换CSS中常用的颜色编码要求。要求:
alert(toRgb("#0000FF"));//rgb(0,0,255);
alert(toRgb("invalid")) //invalid
alert(toRgb("#G00"))//#G00
思路:
1.理解题目意思,也就是符合要求的十六进制就转换,不符合的就返回参数本身
2.首先判断参数是否是符合条件的,首先需要#开头,其次要符合十六进制的规范,所有的数需要在0-F之间
3.数值转换需要用到parseInt的第二个radix参数进行进制转换,两两一位
本人的代码
const sixtyradix = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'A', 'B', 'C', 'D', 'E', 'F']
function toRgb(param) {
if (typeof param == "string" && param.startsWith('#') && param.length == 7) {
let result = '';
let status = true
let parta = param.substring(1, 3);
let partb = param.substring(3, 5);
let partc = param.substring(5, 7)
parta.split('').every(item =>
sixtyradix.includes(item)
) ?
result = result + 'rgb(' + parseInt(parta, 16) + ','
:
status = false
partb.split('').every(item =>
sixtyradix.includes(item)
) ? result = result + parseInt(partb, 16) + ',' : status = false
partc.split('').every(item =>
sixtyradix.includes(item)
) ? result = result + parseInt(partc, 16) + ')' : status = false
if (status) {
return result
}
else {
return param
}
}
else {
return param
}
}
alert(toRgb("#0000FF"));
alert(toRgb("invalid"));
alert(toRgb("#G00"));
写完之后,还是能发现有很多不足
1.又臭又长,代码逻辑太复杂,没有必要
2.太多变量,如果每个功能都这样写,内存性能吃不消
3.判断逻辑死板,没有注意大小写等细节
带着疑问去看了一下答案,答案只用了三行代码
function toRGB(color) {
var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
match = color.match(regex)
return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')' : color
}
前段时间刚看过姚老师的正则表达,还做了读书笔记(正则表达式读书笔记),结果处理问题的时候第一个没有想到正则。
正则分两两校验,通过math[index]获取正则中()捕获的匹配值,很好的代替了自己方法中的字符拆分问题,虽然理解题目的思路是一样的,但是用了正则之后,基本解决了我上面的所有存在的问题,且该方法不存在浏览器兼容性问题。