顏色十六進制轉換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]獲取正則中（）捕獲的匹配值，很好的代替了本身方法中的字符拆分問題，雖然理解題目的思路是同樣的，可是用了正則以後，基本解決了我上面的全部存在的問題，且該方法不存在瀏覽器兼容性問題。

紙上得來終覺淺，絕知此事要躬行。學了要去用，才能記憶深入，才能融匯貫通~