HSL in Objekt umwandeln

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

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.