HSL in Objekt umwandeln

JavaScriptJavaScriptBeginner
Jetzt üben

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

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir untersuchen, wie man einen hsl()-Farbstring in ein Objekt mit individuellen Werten für Farbton, Sättigung und Helligkeit umwandeln kann. Wir werden String-Manipulation und Array-Methoden verwenden, um die numerischen Werte zu extrahieren und sie in ein neues Objekt mit benannten Eigenschaften zu speichern. Am Ende dieses Labs werden Sie ein besseres Verständnis dafür haben, wie man mit Farbwerten in JavaScript umgeht.


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") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("Destructuring Assignment") subgraph Lab Skills javascript/variables -.-> lab-28652{{"HSL in Objekt umwandeln"}} javascript/data_types -.-> lab-28652{{"HSL in Objekt umwandeln"}} javascript/arith_ops -.-> lab-28652{{"HSL in Objekt umwandeln"}} javascript/comp_ops -.-> lab-28652{{"HSL in Objekt umwandeln"}} javascript/higher_funcs -.-> lab-28652{{"HSL in Objekt umwandeln"}} javascript/destr_assign -.-> lab-28652{{"HSL in Objekt umwandeln"}} end

Umwandlung von HSL in Objekt

Um einen hsl()-Farbstring in ein Objekt mit den numerischen Werten jeder Farbe umzuwandeln, folgen Sie diesen Schritten:

  • Ö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.
  • Konvertieren Sie die Strings in ein Array von numerischen Werten, indem Sie Array.prototype.map() in Kombination mit Number verwenden.
  • Speichern Sie die Werte in benannten Variablen, indem Sie Array-Destrukturierung verwenden.
  • Erstellen Sie aus den benannten Variablen ein passendes Objekt.
const toHSLObject = (hslStr) => {
  const [hue, saturation, lightness] = hslStr.match(/\d+/g).map(Number);
  return { hue, saturation, lightness };
};

Beispielverwendung:

toHSLObject("hsl(50, 10%, 10%)"); // { hue: 50, saturation: 10, lightness: 10 }

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab zur Umwandlung von HSL in Objekt abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.