hex2Rgb
上一篇文章實現(xiàn)了rgb轉(zhuǎn)hex，今天再把hex轉(zhuǎn)rgb寫一寫。
分析：
hex色值是#+數(shù)字或者字母（A-F）；
rgb的色值是rgb+三個數(shù)字+兩個括號；
所以我們需要把hex中#號后的字符取出來，再把取出來的字符分成三個變量，把每個變量轉(zhuǎn)換成rgb所需的10進制數(shù)字。
步驟
1.截取hex #號后的字符；
2.判斷字符長度，如果length是3則表示hex值為簡寫形式，需補充當前字符，如果length不為3，直接截取字符；
3.把得到的數(shù)組使用parseInt轉(zhuǎn)成10進制的數(shù)字；
4.最后拼接字符。
parseInt語法
parseInt
parseInt例子
radix介于 2 ~ 36 之間，正是我們想要的轉(zhuǎn)換結(jié)果
現(xiàn)在有個變量 hexStr = '#FFFFFF';
1.獲取#號后的字符
str
2.判斷str長度
- 如果為3則需補充每一項
arr = str.split('').map(d => parseInt(d.repeat(2), 16))
arr
- 如果不為3，直接截取字符
arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
arr
3.將arr拼接成rgb顏色
`rgb(${arr.join(', ')})`
result
4.完整示例
const hex2Rgb = (hex) => {
const str = hex.substring(1);
let arr;
if (str.length === 3) arr = str.split('').map(d => parseInt(d.repeat(2), 16));
else arr = [parseInt(str.slice(0, 2), 16), parseInt(str.slice(2, 4), 16), parseInt(str.slice(4, 6), 16)];
return `rgb(${arr.join(', ')})`;
};
完整示例
