将 HSL 转换为数组

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 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() 颜色字符串转换为一个值数组,请执行以下步骤:

  1. 打开终端/SSH 并输入 node 以开始练习编码。
  2. 使用 String.prototype.match() 获取一个包含数值的 3 个字符串的数组。
  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 中练习更多实验来提升你的技能。