Zeilenfortsetzungszeichen in JavaScript

Tahseen Tauseef 15 Februar 2024
  1. Lexikalische Grammatik in JavaScript
  2. Zeichenfolgenliterale in JavaScript
  3. Zeilenfortsetzung in JavaScript
  4. Implementieren Sie die Zeilenfortsetzung mithilfe einer Escape-Methode in JavaScript
  5. Implementieren Sie die Zeilenfortsetzung mithilfe von Vorlagenliteralen in JavaScript
  6. Implementieren Sie die Zeilenfortsetzung mit dem HTML-Break-Element in JavaScript
Zeilenfortsetzungszeichen in JavaScript

Die lexikalische Grammatik in JavaScript wird in diesem kurzen JavaScript-Tutorial behandelt. Außerdem werden Zeichenfolgen mit verschiedenen neuen Linientechniken und dem Umgang mit Zeilenumbrüchen im Umgang mit diesen Zeichenfolgen ausführlich behandelt.

Lexikalische Grammatik in JavaScript

In der Informatik ist die lexikalische Grammatik eine technische Grammatik, die die Syntax von Token beschreibt. Das Programm ist mit Zeichen aufgebaut, die durch die linguistische Struktur der Sprache definiert sind.

Der Zeichensatz ist vergleichbar mit dem Alphabet jeder geschriebenen Sprache. Der Quelltext von ECMAScript-Skripten wird von links nach rechts gelesen und in eine Reihe von Eingabekomponenten wie Token, Steuerzeichen, Zeilenabschlüsse, Kommentare oder Leerzeichen umgewandelt.

ECMAScript definiert bestimmte Schlüsselwörter, Literale und Regeln zum Einfügen von Semikolons nach Anweisungen.

Zeichenfolgenliterale in JavaScript

Ein Zeichenfolgenliteral ist eine Reihenfolge von null oder mehr Unicode-Codepunkten, die von einfachen oder doppelten Anführungszeichen umgeben sind. Eine Escape-Sequenz kann auch Unicode-Codepunkte darstellen.

Mit Ausnahme der folgenden Codepunkte in schließenden Anführungszeichen können alle Codepunkte wörtlich in einem Zeichenfolgenliteral auftreten:

  1. U+005C oder \ (Backslash),
  2. U+000D oder <CR>,
  3. und U+000A oder <LF>.

Alle Codepunkte können als Escape-Sequenz erscheinen.

Zeichenfolgenliterale werden als ECMAScript-Zeichenfolgenwerte interpretiert. Unicode-Codepunkte sind UTF-16-kodiert, wenn diese String-Werte generiert werden.

Zeilenfortsetzung in JavaScript

Die String-Manipulation in JavaScript kann komplex sein. Obwohl die Manipulation von Zeichenfolgen einfach zu meistern ist, ist sie schwierig zu implementieren, und ein verwandter Bereich ist das Hinzufügen neuer Zeilen.

Es gibt andere Möglichkeiten, neue Zeilen mit JavaScript einzufügen, aber sie sind nicht so einfach wie das Absatz- oder Break-Tag von HTML.

Sehen wir uns dennoch die beliebtesten Methoden zum Einfügen einer neuen Zeile in JavaScript an.

Implementieren Sie die Zeilenfortsetzung mithilfe einer Escape-Methode in JavaScript

In JavaScript sind Escape-Sequenzen ein systematischer Weg, um eine neue Zeile zu erstellen. In Windows und Linux ist die Escape-Sequenz für eine neue Zeile \n; Auf einigen älteren Macs wird jedoch \r verwendet.

Die Implementierung von Escape-Sequenzen ist relativ einfach.

Beispiel:

let data = 'Hello World';

let newstring = 'Hello \nWorld';

console.log(data);

console.log(newstring);

Ausgang:

"Hello World"
"Hello
World"

Sie können das Ergebnis des obigen Codesegments auch über diesen Link sehen.

Note
Schließen Sie nach der Escape-Sequenz für neue Zeilen keine Leerzeichen ein, da JavaScript sie als Leerzeichen interpretiert und in die Ausgabe einschließt.

Hexadezimale Escape-Sequenzen

Hexadezimale Escape-Sequenzen bestehen aus dem Zeichen \x, gefolgt von genau zwei Hexadezimalzahlen, die eine Codeeinheit oder einen Punkt im Bereich von 0x0000 bis 0x00FF bezeichnen.

Beispiel:

'\xA9'  // "©"

Unicode-Escape-Sequenzen

Nach \u besteht eine Unicode-Escape-Sequenz aus genau vier Hexadezimalziffern. In der UTF-16-Kodierung bezeichnet es eine Codeeinheit.

Die Codeeinheit entspricht den Codepunkten U+0000 bis U+FFFF. Codepunkte erfordern zwei Escape-Sequenzen, die die beiden Codeeinheiten widerspiegeln, die zum Codieren des Zeichens verwendet werden; das Ersatzpaar ist vom Codepunkt aus eindeutig.

Beispiel:

'\u00A9'  // "©" (U+A9)

Unicode-Codepunkt-Escape-Sequenzen

Eine Unicode-Codepunkt-Escape-Sequenz besteht aus \u{} mit einem hexadezimalen Codepunkt. Die Hexadezimalziffern müssen von 0 bis 0x10FFFF reichen.

Ersatzpaare sind für Codepunkte in U+10000 bis U+10FFFF nicht erforderlich. In ECMAScript 2015 wurden JavaScript (ES6) Codepunkt-Escapes hinzugefügt.

Beispiel:

'\u{2F804}'  // CJK COMPATIBILITY IDEOGRAPH-2F804 (U+2F804)

// the same figure portrayed as a surrogate twin

'\uD87E\uDC04'

Implementieren Sie die Zeilenfortsetzung mithilfe von Vorlagenliteralen in JavaScript

Vorlagenliterale mögen kompliziert erscheinen, aber sie sind Zeichenfolgenliterale, die eingebettete Ausdrücke hinter dem Jargon unterstützen. Sie erleichtern die Verwendung von mehrzeiligen Zeichenfolgen.

Backticks (``) werden verwendet, um Template-Literale einzuschließen.

Beispiel:

let data = 'Hello \nWorld';

let newstring = `Hello

World`;

console.log(data);

console.log(newstring);

Ausgang:

"Hello
World"
"Hello
World"

Sie können das Ergebnis des obigen Codesegments auch über diesen Link sehen.

Dieselbe Ausgabe wird in beiden Situationen der Escape-Methode und der Vorlagenliterale zurückgegeben. Wie Sie jedoch sehen können, erleichtern Vorlagenliterale das Schreiben mehrzeiliger Zeichenfolgen.

Implementieren Sie die Zeilenfortsetzung mit dem HTML-Break-Element in JavaScript

Eine andere Möglichkeit, eine neue Zeile in JavaScript zu erstellen, besteht darin, die HTML-Zeilenumbruchelemente in Ihren String aufzunehmen.

Es ist wichtig zu beachten, dass Break-Elemente nur verwendet werden sollten, wenn die Teilung einer Linie signifikant ist. Da diese Strategie jedoch sehr weit verbreitet ist, werden wir uns auch damit befassen.

Beispiel:

<html>

<body>

<p id="newline"></p>

<script>

let data = "Hello" + "<br>" + "World ";

document.getElementById("newline").innerHTML = data;

</script>

</body>

</html>

Ausgang:

Javascript-Zeilenfortsetzung - Ausgabe

Notiz
Denken Sie daran, .innerHTML und nicht .innerText zu verwenden, wie Sie es bei anderen Textinhalten tun würden.

Sie können das Ergebnis des obigen Codesegments auch über diesen Link sehen.