JavaScript：怎么将颜色字符串转为对象？

将HSL颜色字符串转换为具有每个颜色值的对象

思路：

• 使用String.prototype.match()获取一个包含3个字符串和数值的数组;
• 将Array.prototype.map()与Number结合使用，将它们转换为数值数组;
• 使用数组分解将值存储到命名变量中，并从中创建适当的对象。

代码实现：

1. consttoHSLObject=(hslStr)=>{
2. const[hue,saturation,lightness]=hslStr.match(/\d+/g).map(Number);
3. return{hue,saturation,lightness};
4. }
5.  
6. //测试
7. console.log(toHSLObject('hsl(50,10%,10%)'));//{hue:50,saturation:10,lightness:10}

根据以上思路，可将RGB、RGBA、HSLA进行同样的处理，如下：

拓展一：将RGB颜色字符串转换为具有每个颜色值的对象

代码实现：

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

拓展二：将RGBA颜色字符串转换为具有每个颜色值的对象

代码实现：

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

拓展三：将HSLA颜色字符串转换为具有每个颜色值的对象

代码实现：

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

原文链接：https://www.toutiao.com/a7008353282003321347/