十六進位制顏色值和rgb顏色值互相轉換 將16進位制的顏色轉為rgb顏色
阿新 • • 發佈:2019-01-11
在之前的一篇文章《將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。請在不同的場景下正確使用兩個方法。