HOWTO · JavaScript
Neue Zeile schreiben in JavaScript
Dieses Tutorial lehrt, wie man eine neue Zeile in JavaScript schreibt.
Auf dieser Seite
Um in JavaScript eine neue Zeile zu schreiben, fügen Sie die Escape-Sequenz \n in einen String ein oder verwenden Sie ein Template-Literal mit einem tatsächlichen Zeilenumbruch. Beide Möglichkeiten eignen sich für Strings und Konsolenausgaben. Für Text im Browser erzeugen Sie ein HTML-Element <br> oder verwenden separate Blockelemente. Ein Zeilenumbruchzeichen in einem String wird nicht automatisch als sichtbarer Zeilenumbruch in HTML dargestellt.
Mit einer Escape-Sequenz einen Zeilenumbruch einfügen
Die Escape-Sequenz \n steht innerhalb eines JavaScript-Strings für einen Zeilenvorschub. Fügen Sie sie an der Stelle ein, an der die nächste Zeile beginnen soll, und übergeben Sie den String anschließend an die gewünschte Ausgabemethode. console.log() gibt den Zeilenvorschub beispielsweise in der Konsole aus, sodass die Nachricht in zwei Zeilen erscheint.
Führen Sie dieses Beispiel aus:
Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.
const message = "Hello, World!\nWelcome to JavaScript.";
console.log(message);
Derselbe String lässt sich speichern, verketten oder an eine andere Funktion übergeben. Der Zeilenvorschub gehört zum Stringwert und ist nicht von console.log() abhängig. Wenn ein Ziel Zeilenvorschübe nicht visuell darstellt, etwa normaler HTML-Text, wählen Sie stattdessen eine Darstellungsmethode, die für dieses Ziel geeignet ist.
Template-Literale für mehrzeilige Strings verwenden
Template-Literale werden mit Backticks begrenzt und können sich über mehrere Quelltextzeilen erstrecken. Die Zeilenumbrüche innerhalb der Backticks werden Teil des Strings. Das kann die Lesbarkeit verbessern, wenn Sie längeren festen Text schreiben. Außerdem unterstützen Template-Literale Interpolation mit ${expression}. So können Sie einen Wert einfügen, ohne Strings manuell verketten zu müssen.
Führen Sie dieses Beispiel aus:
Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.
const name = "JavaScript";
const message = `Hello, World!
Welcome to ${name}.`;
console.log(message);
Verwenden Sie ein Template-Literal, wenn der Quelltext von einer mehrzeiligen Schreibweise profitiert oder der String interpolierte Werte enthält. \n eignet sich, wenn der Text ansonsten kurz ist oder der genaue Umbruch an einer bestimmten Stelle in einem einzeiligen String sichtbar sein soll. Beide Varianten erzeugen einen String mit einem Zeilenvorschub. Keine von ihnen bestimmt, wie ein Browser den String darstellt.
Zeilenumbrüche in HTML darstellen
Für Inhalte im Browser erzeugt <br> innerhalb eines Textes einen sichtbaren Zeilenumbruch. Bei festem Seiteninhalt können Sie den Umbruch direkt in das HTML schreiben. Bei dynamischen Inhalten erstellen Sie das Element mit document.createElement("br") und fügen es zwischen Textknoten ein. So bleiben Werte Text, statt dass der Browser einen String als Markup interpretiert.
Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.
<p>Hello, World!<br>Welcome to JavaScript.</p>
Dieses HTML ist ein statisches Beispiel für eine Browserseite, kein Konsolenbeispiel und keine Laufzeitausgabe. Bei dynamischen Werten verwenden Sie vorzugsweise textContent oder Textknoten. Wenn Sie nicht vertrauenswürdige Eingaben innerHTML zuweisen, kann der Browser sie als Markup interpretieren. Dadurch entsteht ein Risiko für Cross-Site-Scripting. Verwenden Sie innerHTML nur, wenn das Markup vertrauenswürdig ist und tatsächlich geparst werden muss.
CSS-Ränder und Innenabstände können sichtbaren Abstand zwischen getrennten Elementen schaffen. Sie fügen jedoch weder ein Zeilenumbruchzeichen in einen JavaScript-String ein noch erzeugen sie einen Zeilenumbruch innerhalb eines Textknotens. Verwenden Sie \n oder ein mehrzeiliges Template-Literal für Stringinhalte, <br> für einen Umbruch in Browsertext und CSS-Abstände, wenn es um das Layout zwischen Elementen geht.
