JavaScript:怎么将颜色字符串转为对象?
itnanba · 191浏览 · 发布于2021-09-17
将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 }
相关推荐
RN开发环境的npm私库本地debug调试
manongba · 696浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理
追忆似水年华 · 1372浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式
追忆似水年华 · 994浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取
manongba · 716浏览 · 2019-06-10 09:16:16
浏览器关闭后,Session会话结束了么?
追忆似水年华 · 905浏览 · 2019-06-13 09:39:50
分类专栏
最新发布
最热排行
0评论