Hex-Wert erweitern: Meisterung der Umwandlung von 3-stelligen in 6-stellige Farbcodes

Einführung

In diesem Lab werden wir untersuchen, wie man mithilfe von JavaScript einen 3-stelligen Farbcode in einen 6-stelligen Farbcode erweitert. Wir werden Array-Methoden wie map(), split() und join() zusammen mit slice() verwenden, um das # am Anfang der Zeichenkette zu entfernen, sofern es vorhanden ist. Dieses Lab wird Ihnen helfen, zu verstehen, wie man in JavaScript Zeichenketten und Arrays manipuliert, um ein gewünschtes Ergebnis zu erzielen.

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-28292{{"Hex-Wert erweitern"}} javascript/data_types -.-> lab-28292{{"Hex-Wert erweitern"}} javascript/arith_ops -.-> lab-28292{{"Hex-Wert erweitern"}} javascript/comp_ops -.-> lab-28292{{"Hex-Wert erweitern"}} javascript/higher_funcs -.-> lab-28292{{"Hex-Wert erweitern"}} end

Wie man einen 3-stelligen Farbcode in einen 6-stelligen Farbcode erweitert

Um das Programmieren zu üben, öffnen Sie das Terminal/SSH und geben Sie node ein. Sie können die folgende Funktion verwenden, um einen 3-stelligen Farbcode in einen 6-stelligen Farbcode zu erweitern:

const extendHex = (shortHex) =>
  "#" +
  shortHex
    .slice(shortHex.startsWith("#") ? 1 : 0)
    .split("")
    .map((x) => x + x)
    .join("");

Um einen 3-stelligen RGB-kodierten hexadezimalen Farbcode in die 6-stellige Form zu konvertieren, folgen Sie diesen Schritten:

Verwenden Sie Array.prototype.map(), String.prototype.split() und Array.prototype.join(), um das gemappte Array zu verbinden.
Verwenden Sie Array.prototype.slice(), um # am Anfang der Zeichenkette zu entfernen, da es einmal hinzugefügt wird.

Hier sind einige Beispiele:

extendHex("#03f"); // '#0033ff'
extendHex("05a"); // '#0055aa'

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Erweitern des Hex-Werts" abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.