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

 

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

思路：

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

代码实现：

const toHSLObject = (hslStr) => {    const [hue,对象 saturation, lightness] = hslStr.match(/\d+/g).map(Number);   return {  hue, saturation, lightness }; } //测试 console.log(toHSLObject(hsl(50, 10%, 10%)));  // {  hue: 50, saturation: 10, lightness: 10 } 

根据以上思路，可将RGB、将颜RGBA、色字HSLA进行同样的符串处理，亿华云计算如下：

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

代码实现：

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颜色字符串转换为具有每个颜色值的对象

代码实现：

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颜色字符串转换为具有每个颜色值的对象

代码实现：

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 } 

很赞哦!（6397）