在 JavaScript 中把 HSL 转换为数组

简介

在本实验中，我们将探索如何使用 JavaScript 将 hsl() 颜色字符串转换为一个值数组。我们将结合使用正则表达式和数组方法从字符串中提取数值，并将它们转换为一个数值数组。本实验将帮助你了解如何在 JavaScript 中处理颜色值，并提高你使用正则表达式和数组操作的技能。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28651{{"将 HSL 转换为数组"}} javascript/data_types -.-> lab-28651{{"将 HSL 转换为数组"}} javascript/arith_ops -.-> lab-28651{{"将 HSL 转换为数组"}} javascript/comp_ops -.-> lab-28651{{"将 HSL 转换为数组"}} javascript/higher_funcs -.-> lab-28651{{"将 HSL 转换为数组"}} end

将 HSL 转换为数组

要将 hsl() 颜色字符串转换为一个值数组，请执行以下步骤：

打开终端/SSH 并输入 node 以开始练习编码。
使用 String.prototype.match() 获取一个包含数值的 3 个字符串的数组。
结合使用 Array.prototype.map() 和 Number 将它们转换为一个数值数组。

以下是将 hsl() 颜色字符串转换为数值数组的代码：

const toHSLArray = (hslStr) => hslStr.match(/\d+/g).map(Number);

示例用法：

toHSLArray("hsl(50, 10%, 10%)"); // [50, 10, 10]

总结

恭喜你！你已经完成了将 HSL 转换为数组的实验。你可以在 LabEx 中练习更多实验来提升你的技能。