Mehrzeilige Strings in JavaScript: 3 Methoden, die das Leben erleichtern

Wie weist man einer Variablen einen mehrzeiligen String in JavaScript zu: Eine Einführung für Anfänger

Haben Sie jemals einen langen Text im Code geschrieben und gedacht: „Kann ich nicht einfach die Eingabetaste drücken und in der neuen Zeile weitermachen?“ Wenn Sie neu in JavaScript sind, sind Sie wahrscheinlich bereits darauf gestoßen. Sie versuchen, einen mehrzeiligen Text in einer Variablen zu speichern, und erhalten einen Syntaxfehler. Kommt Ihnen das bekannt vor?

Die Frage „How can I assign a multiline string literal to a variable?“ ist eine der beliebtesten auf Stack Overflow. Tausende von Entwicklern suchen nach einer Antwort darauf. Und das ist nicht verwunderlich: Die Arbeit mit mehrzeiligen Strings ist eine Grundlage, die jeder beherrschen muss, der in JavaScript schreibt.

In diesem Artikel geben wir nicht nur eine trockene Antwort. Wir analysieren drei funktionierende Methoden, zeigen Beispiele aus der Praxis und geben Tipps, welche Methode Sie wählen sollten, damit Ihr Code sauber, lesbar und kopfschmerzfrei bleibt.

Warum JavaScript keine Zeilenumbrüche in Anführungszeichen mag?

Lassen Sie uns gleich das Hauptproblem klären. Wenn Sie versuchen, Folgendes zu schreiben:

let message = "Hallo!\nWie geht es dir?\nAlles gut?";\nconsole.log(message);

… erhalten Sie den Fehler SyntaxError: unterminated string literal. Warum? Weil JavaScript bei normalen Strings (in doppelten oder einfachen Anführungszeichen) davon ausgeht, dass der String in derselben Zeile endet, in der er begonnen hat. Ein Zeilenumbruch unterbricht den String physisch.

Aber keine Sorge. Wir haben mindestens drei Möglichkeiten, diese Einschränkung zu umgehen. Und die erste ist die modernste und bequemste.

Methode 1: Template-Literale (Template Literals) – Ihr neuer bester Freund

Seit ES6 (ECMAScript 2015) gibt es in JavaScript Template-Literale. Dies sind Strings, die in Backticks (` `) eingeschlossen werden. Und sie lösen das Problem der Mehrzeiligkeit ein für alle Mal.

Sehen Sie, wie einfach das ist:

let multilineString = `Dies ist die erste Zeile.\nDies ist die zweite Zeile.\nUnd dies ist die dritte Zeile.`;\n\nconsole.log(multilineString);\n// Ausgabe:\n// Dies ist die erste Zeile.\n// Dies ist die zweite Zeile.\n// Und dies ist die dritte Zeile.

Alles funktioniert sofort. Sie schreiben einfach den Text mit Zeilenumbrüchen, und JavaScript behält sie so bei, wie sie sind. Keine zusätzlichen Zeichen, keine Magie.

Warum ist dies die beste Option für Anfänger?

\n
• Lesbarkeit: Der Code sieht so aus, wie Sie es beabsichtigt haben.
\n
• Unterstützung für Interpolation: Sie können Variablen direkt über ${...} in den String einfügen.
\n
• Standard: Alle modernen Browser und Node.js unterstützen Template-Literale.
\n

Beispiel mit Interpolation:

let name = "Anna";\nlet greeting = `Hallo, ${name}!\nWillkommen bei PythonLib.\nHeute ist ein großartiger Tag, um Code zu lernen.`;\n\nconsole.log(greeting);\n// Ausgabe:\n// Hallo, Anna!\n// Willkommen bei PythonLib.\n// Heute ist ein großartiger Tag, um Code zu lernen.

Diese Methode ist so praktisch, dass sie in der modernen Entwicklung in 90% der Fälle verwendet wird. Wenn Sie gerade erst anfangen – merken Sie sich diese.

Methode 2: String-Verkettung (alte, aber zuverlässige Methode)

Vor der Einführung von Template-Literalen verwendeten Entwickler die Verkettung – das Zusammenfügen von Strings mit dem +-Operator. Diese Methode ist immer noch relevant, besonders wenn Sie mit sehr altem Code arbeiten oder ES6 aus irgendeinem Grund nicht verwenden können.

So sieht das aus:

let multilineString = "Dies ist die erste Zeile.\\n" +\n                     "Dies ist die zweite Zeile.\\n" +\n                     "Und dies ist die dritte Zeile.";\n\nconsole.log(multilineString);\n// Ausgabe:\n// Dies ist die erste Zeile.\n// Dies ist die zweite Zeile.\n// Und dies ist die dritte Zeile.

Beachten Sie \\n – dies ist eine Escape-Sequenz