在之前的一篇文章《將16進(jìn)制的顏色轉(zhuǎn)為rgb顏色》中，曾經(jīng)寫過將16進(jìn)制的顏色轉(zhuǎn)換為rgb顏色。

　　當(dāng)然了，今天再看，還是有很多可以優(yōu)化的地方，所以對(duì)之前的代碼重構(gòu)了一遍，并且同時(shí)寫了一個(gè)反向轉(zhuǎn)換（也就是將rgb顏色值轉(zhuǎn)換為字符串形式的16進(jìn)制的顏色值）函數(shù)。

　　16進(jìn)制轉(zhuǎn)換rgb：

    function transferColorToRgb(color) {
            if (typeof color !== 'string' && !(color instanceof String)) return console.error("請(qǐng)輸入16進(jìn)制字符串形式的顏色值");
            color = color.charAt(0) === '#' ? color.substring(1) : color;
            if (color.length !== 6 && color.length !== 3) return console.error("請(qǐng)輸入正確的顏色值")
            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() + ')';
        }

　　調(diào)用時(shí)，參數(shù)形式可以為帶“#”號(hào)，也可以不帶，實(shí)際顏色值可以為3位，也可以為6位，如： "#ffffff"、"#fff"、"ffffff"、"fff"。

　　其中涉及到了利用正則表達(dá)式對(duì)3位16進(jìn)制的顏色值轉(zhuǎn)換為6位的數(shù)值。

color.replace(/(w)(w)(w)/, '$1$1$2$2$3$3')

　　rgb顏色值轉(zhuǎn)為為16進(jìn)制的顏色值：

    function transferRgbToStr(color) {
            if (typeof color !== 'string' && !(color instanceof String) || !~color.indexOf('rgb')) return console.error("請(qǐng)輸入rgb形式的顏色值");
            color = color.replace(/s+/g, '');
            var index = color.indexOf('(') + 1;
            //注意： String 的slice方法，slice方法參數(shù)為負(fù)數(shù)時(shí)，即為倒數(shù)
            // substring 方法參數(shù)為負(fù)數(shù)時(shí)，全都認(rèn)為是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之間，請(qǐng)注意輸入值！")
                colors[i] = parseInt(colors[i], 10).toString(16);
                if (colors[i].length === 1) {
                    colors[i] = "0" + colors[i]
                }
            }
            return colors.join("");
        }

　　調(diào)用時(shí)，參數(shù)形式可以為帶“rgb()”形式的，也可以為"rgba()"形式的數(shù)據(jù)，如：rgb(122,23,1) 、rgba(123,23,12,0.5)。

　　需要注意的是：

var colors = color.slice(index, -1).split(',').slice(0, 3);

　　這一句代碼當(dāng)中，有兩個(gè)slice方法，一個(gè)是字符串方法，一個(gè)是數(shù)組方法，盡管他們的用法一樣，仍然需要謹(jǐn)慎。

　　還涉及到了String方法中的substring和slice方法使用上的區(qū)別，主要是參數(shù)為負(fù)數(shù)時(shí)，兩者不同的處理方式。slice當(dāng)做倒數(shù)，也就是從后往前數(shù)，而sunstring則完全認(rèn)作是0。請(qǐng)?jiān)诓煌膱?chǎng)景下正確使用兩個(gè)方法。　　

　　

總結(jié)

以上是生活随笔為你收集整理的十六进制颜色值和rgb颜色值互相转换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。