Farbige Konsolenausgabe | JavaScript-Tutorials

Einführung

In diesem Lab werden wir untersuchen, wie man in JavaScript mithilfe spezieller Zeichen der Ausgabe von Text in der Konsole Farben hinzufügt. Wir werden lernen, wie die colorize-Funktion verwendet wird, um verschiedene Text- und Hintergrundfarben auf unsere Konsolenausgabe anzuwenden, was sie visuell ansprechender und lesbarer macht. Am Ende dieses Labs werden Sie in Ihren JavaScript-Anwendungen farbenfrohe und auffällige Konsolenausgaben erstellen können.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/ToolsandEnvironmentGroup(["Tools and Environment"]) 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/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") javascript/ToolsandEnvironmentGroup -.-> javascript/debugging("Debugging") subgraph Lab Skills javascript/variables -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} javascript/data_types -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} javascript/arith_ops -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} javascript/comp_ops -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} javascript/loops -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} javascript/spread_rest -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} javascript/template_lit -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} javascript/debugging -.-> lab-28200{{"Farbige Konsolenausgabe mit JavaScript"}} end

Text färben

Um in der Konsole farbigen Text auszugeben, folgen Sie den folgenden Schritten und verwenden Sie die Funktion colorize():

Öffnen Sie das Terminal/SSH und geben Sie node ein, um mit der Codeausführung zu beginnen.
Verwenden Sie Template-Literale und spezielle Zeichen, um den passenden Farbcode zur Zeichenkettenergebnis hinzuzufügen.
Um eine Hintergrundfarbe hinzuzufügen, fügen Sie am Ende der Zeichenkette ein spezielles Zeichen hinzu, das die Hintergrundfarbe zurücksetzt.

Die colorize()-Funktion erstellt ein Objekt mit 16 Eigenschaften, einschließlich der Farbcodes für Schwarz, Rot, Grün, Gelb, Blau, Magenta, Cyan und Weiß. Darüber hinaus hat sie Eigenschaften zum Hinzufügen einer Hintergrundfarbe zum Text.

Um die colorize()-Funktion zu verwenden, rufen Sie sie mit dem zu färbenden Text als Argument(en) auf, gefolgt von der Farb- oder Hintergrundfarbeigenschaft. Beispielsweise wird colorize('foo').red 'foo' mit roten Buchstaben ausgeben.

Verwenden Sie die console.log()-Funktion, um den farbigen Text in die Konsole auszugeben.

const colorize = (...args) => ({
  black: `\x1b[30m${args.join(" ")}`,
  red: `\x1b[31m${args.join(" ")}`,
  green: `\x1b[32m${args.join(" ")}`,
  yellow: `\x1b[33m${args.join(" ")}`,
  blue: `\x1b[34m${args.join(" ")}`,
  magenta: `\x1b[35m${args.join(" ")}`,
  cyan: `\x1b[36m${args.join(" ")}`,
  white: `\x1b[37m${args.join(" ")}`,
  bgBlack: `\x1b[40m${args.join(" ")}\x1b[0m`,
  bgRed: `\x1b[41m${args.join(" ")}\x1b[0m`,
  bgGreen: `\x1b[42m${args.join(" ")}\x1b[0m`,
  bgYellow: `\x1b[43m${args.join(" ")}\x1b[0m`,
  bgBlue: `\x1b[44m${args.join(" ")}\x1b[0m`,
  bgMagenta: `\x1b[45m${args.join(" ")}\x1b[0m`,
  bgCyan: `\x1b[46m${args.join(" ")}\x1b[0m`,
  bgWhite: `\x1b[47m${args.join(" ")}\x1b[0m`
});

console.log(colorize("foo").red); // 'foo' (rote Buchstaben)
console.log(colorize("foo", "bar").bgBlue); // 'foo bar' (blaue Hintergrund)
console.log(colorize(colorize("foo").yellow, colorize("foo").green).bgWhite);
// 'foo bar' (erstes Wort in gelben Buchstaben, zweites Wort in grünen Buchstaben, weißer Hintergrund für beide)

Zusammenfassung

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