[[424559]]

將HSL顏色字符串轉(zhuǎn)換為具有每個(gè)顏色值的對(duì)象

思路：

• 使用String.prototype.match()獲取一個(gè)包含3個(gè)字符串和數(shù)值的數(shù)組;
• 將Array.prototype.map()與Number結(jié)合使用，將它們轉(zhuǎn)換為數(shù)值數(shù)組;
• 使用數(shù)組分解將值存儲(chǔ)到命名變量中，并從中創(chuàng)建適當(dāng)?shù)膶?duì)象。

代碼實(shí)現(xiàn)：

const toHSLObject = (hslStr) => { 
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number); 
  return { hue, saturation, lightness }; 
} 
 
//測(cè)試 
console.log(toHSLObject('hsl(50, 10%, 10%)'));  // { hue: 50, saturation: 10, lightness: 10 } 

根據(jù)以上思路，可將RGB、RGBA、HSLA進(jìn)行同樣的處理，如下：

拓展一：將RGB顏色字符串轉(zhuǎn)換為具有每個(gè)顏色值的對(duì)象

代碼實(shí)現(xiàn)：

const toRGBObject = ( rgbStr ) => { 
  const [red, green, blue] = rgbStr.match(/\d+/g).map(Number); 
 
  return {red, green, blue}; 
} 
 
console.log(toRGBObject('rgb(128,0,128)')); // { red: 128, green: 0, blue: 128 } 

拓展二：將RGBA顏色字符串轉(zhuǎn)換為具有每個(gè)顏色值的對(duì)象

代碼實(shí)現(xiàn)：

const toRGBAObject = (rgbaStr) => { 
  let [red, green, blue, alpha] = rgbaStr.match(/\d+(\.\d+)?/g).map(Number); 
 
  return {red, green, blue, alpha}; 
} 
 
console.log(toRGBAObject('rgba(128,0,128, 0.5'));   // { red: 128, green: 0, blue: 128, alpha: 0.5 } 

拓展三：將HSLA顏色字符串轉(zhuǎn)換為具有每個(gè)顏色值的對(duì)象

代碼實(shí)現(xiàn)：

const toRGBAObject = (hslaStr) => { 
  const [hue, saturation, lightness, alpha] = hslaStr.match(/\d+(\.\d+)?/g).map(Number); 
  return { hue, saturation, lightness, alpha}; 
} 
 
console.log(toRGBAObject('hsla(128,0,128, 0.5'));   // { hue: 128, saturation: 0, lightness: 128, alpha: 0.5 }