HSL in JavaScript in ein Array umwandeln

Einführung

In diesem Lab werden wir untersuchen, wie man einen hsl()-Farbenstring mithilfe von JavaScript in ein Array von Werten umwandelt. Wir werden eine Kombination aus regulären Ausdrücken und Array-Methoden verwenden, um die numerischen Werte aus dem String zu extrahieren und sie in ein Array von numerischen Werten umzuwandeln. Dieses Lab wird Ihnen helfen, zu verstehen, wie man mit Farbwerten in JavaScript umgeht, und Ihre Fähigkeiten bei der Arbeit mit regulären Ausdrücken und der Manipulation von Arrays zu verbessern.

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 in ein Array umwandeln"}} javascript/data_types -.-> lab-28651{{"HSL in ein Array umwandeln"}} javascript/arith_ops -.-> lab-28651{{"HSL in ein Array umwandeln"}} javascript/comp_ops -.-> lab-28651{{"HSL in ein Array umwandeln"}} javascript/higher_funcs -.-> lab-28651{{"HSL in ein Array umwandeln"}} end

HSL in ein Array umwandeln

Um einen hsl()-Farbenstring in ein Array von Werten umzuwandeln, führen Sie die folgenden Schritte aus:

Öffnen Sie das Terminal/SSH und geben Sie node ein, um mit der Codeausführung zu beginnen.
Verwenden Sie String.prototype.match(), um ein Array von 3 Strings mit den numerischen Werten zu erhalten.
Verwenden Sie Array.prototype.map() in Kombination mit Number, um sie in ein Array von numerischen Werten umzuwandeln.

Hier ist der Code, um einen hsl()-Farbenstring in ein Array von numerischen Werten umzuwandeln:

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

Beispielverwendung:

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

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "HSL in Array umwandeln" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.