TOC

So arbeiten Sie mit Strings in JavaScript

Einführung

Ein * String * ist eine Folge von einem oder mehreren Zeichen, die aus Buchstaben, Zahlen oder Symbolen bestehen können. Zeichenfolgen in JavaScript sind primitiv data types und unveränderlich.

Strings sind die Art und Weise, wie wir Text anzeigen und damit arbeiten, und Text ist unsere Hauptmethode für die Kommunikation und das Verständnis über Computer.

In diesem Artikel erfahren Sie, wie Sie die Ausgabe von Zeichenfolgen erstellen und anzeigen, wie Sie Zeichenfolgen verketten, wie Sie Zeichenfolgen in Variablen speichern und wie Sie Anführungszeichen, Apostrophe und Zeilenumbrüche in Zeichenfolgen in JavaScript verwenden.

Erstellen und Anzeigen der Ausgabe von Zeichenfolgen

In JavaScript gibt es drei Möglichkeiten, einen String zu schreiben: Sie können in einfache Anführungszeichen ("" + "), doppelte Anführungszeichen (" + "") oder Backticks ("+ \" \ "+") geschrieben werden ). Die Art des verwendeten Zitats muss auf beiden Seiten übereinstimmen, es ist jedoch möglich, dass alle drei Stile im gesamten Skript verwendet werden können.

Zeichenfolgen, die doppelte Anführungszeichen und einfache Anführungszeichen verwenden, sind praktisch identisch. Da es keine Konvention oder offizielle Präferenz für Strings mit einfachen oder doppelten Anführungszeichen gibt, ist alles, was wichtig ist, innerhalb der Projektprogrammdateien konsistent zu bleiben.

'This string uses single quotes.';
"This string uses double quotes.";

Der dritte und neueste Weg, einen String zu erstellen, heißt * Template-Literal *. Vorlagenliterale verwenden das Backtick (auch als schwerwiegender Akzent bezeichnet) und funktionieren genauso wie reguläre Zeichenfolgen mit einigen zusätzlichen Boni, auf die wir in diesem Artikel eingehen.

`This string uses backticks.`;

Am einfachsten können Sie die Ausgabe einer Zeichenfolge anzeigen, indem Sie sie mit + console.log () + auf der Konsole ausgeben:

console.log("This is a string in the console.");
OutputThis is a string in the console.

Eine andere einfache Möglichkeit, einen Wert auszugeben, besteht darin, ein Alarm-Popup mit + alert () + an den Browser zu senden:

alert("This is a string in an alert.");

Wenn Sie die obige Zeile ausführen, wird die folgende Ausgabe in der Benutzeroberfläche des Browsers angezeigt:

image: https://assets.digitalocean.com/articles/eng_javascript/js-strings/js-alert-string-output.png [Ausgabe von JavaScript-Warnungszeichenfolgen]

+ alert () + ist eine weniger verbreitete Methode zum Testen und Anzeigen von Ausgaben, da das Schließen der Warnungen schnell mühsam werden kann.

Speichern eines Strings in einer Variablen

Variablen in JavaScript sind benannte Container, die einen Wert mit den Schlüsselwörtern + var +, + const + oder + let + speichern. Wir können einer benannten Variablen den Wert eines Strings zuweisen.

const newString = "This is a string assigned to a variable.";

Nachdem die Variable "+ newString +" unsere Zeichenfolge enthält, können wir sie referenzieren und an die Konsole ausgeben.

console.log(newString);

Das wird den Zeichenfolge-Wert ausgeben.

OutputThis is a string assigned to a variable.

Indem wir Variablen verwenden, um für Zeichenfolgen zu stehen, müssen wir eine Zeichenfolge nicht jedes Mal neu eingeben, wenn wir sie verwenden möchten, was die Arbeit mit und die Bearbeitung von Zeichenfolgen in unseren Programmen vereinfacht.

String-Verkettung

  • Verkettung * bedeutet, dass zwei oder mehr Zeichenfolgen zu einer neuen Zeichenfolge zusammengefügt werden. Zur Verkettung verwenden wir den Verkettungsoperator, der durch ein "" - Symbol dargestellt wird. Das "" Symbol ist auch der "https://www.digitalocean.com/community/tutorials/how-to-do-math-injavascript-with-operators#addition-and-subtraction[addition operator" wird mit arithmetischen Operationen verwendet.

Erstellen wir eine einfache Verkettungsinstanz zwischen "" Sea "" und "" Horse "".

"Sea" + "horse";
OutputSeahorse

Die Verkettung verbindet die Zeichenfolgen von Ende zu Ende, kombiniert sie und gibt einen brandneuen Zeichenfolgenwert aus. Wenn wir ein Leerzeichen zwischen den Wörtern "+ Sea " und " Horse +" einfügen möchten, müssen wir ein Leerzeichen in eine der folgenden Zeichenfolgen einfügen:

"Sea " + "horse";
OutputSea horse

Wir verbinden Zeichenfolgen und Variablen, die Zeichenfolgenwerte enthalten, unter Verkettung.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = "My favorite poem is " + poem + " by " + author ".";
OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

Wenn wir zwei oder mehr Zeichenfolgen durch Verketten kombinieren, erstellen wir eine neue Zeichenfolge, die wir im gesamten Programm verwenden können.

Variablen in Zeichenfolgen mit Vorlagenliteralen

Eine Besonderheit der Literalfunktion für Vorlagen ist die Möglichkeit, Ausdrücke und Variablen in eine Zeichenfolge aufzunehmen. Anstatt Verkettung verwenden zu müssen, können wir die Syntax "+ $ {} +" verwenden, um eine Variable einzufügen.

const poem = "The Wide Ocean";
const author = "Pablo Neruda";

const favePoem = `My favorite poem is ${poem} by ${author}.`;
OutputMy favorite poem is The Wide Ocean by Pablo Neruda.

Wie wir sehen können, ist das Einschließen von Ausdrücken in Vorlagenliterale ein weiterer Weg, um dasselbe Ergebnis zu erzielen. In diesem Fall ist die Verwendung von Vorlagenliteralen möglicherweise einfacher und bequemer.

String-Literale und String-Werte

Möglicherweise stellen Sie fest, dass die Zeichenfolgen, die wir im Quellcode schreiben, in Anführungszeichen oder Backticks gesetzt sind, die gedruckte Ausgabe jedoch keine Anführungszeichen enthält.

"Beyond the Sea";
OutputBeyond the Sea

Es gibt einen Unterschied, wenn man sich auf diese bezieht. Ein * Zeichenkettenliteral * ist die Zeichenkette, wie sie im Quellcode geschrieben ist, einschließlich Anführungszeichen. Ein * string value * ist das, was wir in der Ausgabe sehen und enthält keine Anführungszeichen.

Im obigen Beispiel ist "" Beyond the Sea "" ein String-Literal und "+ Beyond the Sea" ein String-Wert.

Anführungszeichen und Apostrophe in Strings

Aufgrund der Tatsache, dass Anführungszeichen zur Bezeichnung von Zeichenfolgen verwendet werden, müssen bei der Verwendung von Apostrophen und Anführungszeichen in Zeichenfolgen besondere Überlegungen angestellt werden. Wenn Sie beispielsweise versuchen, ein Apostroph in der Mitte einer Zeichenfolge in Anführungszeichen zu setzen, wird die Zeichenfolge beendet, und JavaScript versucht, den Rest der beabsichtigten Zeichenfolge als Code zu analysieren.

Wir können dies sehen, indem wir versuchen, ein Apostroph in der nachstehenden "+ I’m +" - Kontraktion zu verwenden:

const brokenString = 'I'm a broken string';

console.log(brokenString);
Outputunknown: Unexpected token (1:24)

Gleiches gilt für den Versuch, Anführungszeichen in doppelten Anführungszeichen zu verwenden.

Um zu vermeiden, dass in diesen Situationen ein Fehler ausgelöst wird, haben wir einige Optionen, die wir verwenden können:

  • Entgegengesetzte Zeichenfolgensyntax

  • Escape-Zeichen

  • Vorlagenliterale

Wir werden diese Optionen weiter unten untersuchen.

Verwenden der alternativen Zeichenfolgensyntax

Eine einfache Möglichkeit, um einzelne Fälle potenziell beschädigter Zeichenfolgen zu umgehen, besteht darin, die entgegengesetzte Zeichenfolgensyntax wie die derzeit verwendete zu verwenden.

Zum Beispiel Apostrophe in Strings, die mit `+" + `erstellt wurden.

"We're safely using an apostrophe in double quotes."

Anführungszeichen in Strings, die mit + '+ erstellt wurden.

'Then he said, "Hello, World!"';

Durch die Kombination von einfachen und doppelten Anführungszeichen können wir die Anzeige von Anführungszeichen und Apostrophen in unseren Zeichenfolgen steuern. Wenn wir jedoch daran arbeiten, eine konsistente Syntax in Projektprogrammierungsdateien zu verwenden, kann es schwierig sein, diese in einer Codebasis beizubehalten.

Verwenden des Escapezeichens (+ \ +)

Wir können den umgekehrten Schrägstrich (+ \ +) verwenden, um zu verhindern, dass JavaScript ein Zitat als Ende der Zeichenfolge interpretiert.

Die Syntax von "" + "wird immer ein einfaches Anführungszeichen sein, und die Syntax von" + "" wird immer ein doppeltes Anführungszeichen sein, ohne Angst davor zu haben, die Zeichenfolge zu brechen.

Mit dieser Methode können wir Apostrophe in Strings verwenden, die mit `+" + `erstellt wurden.

'We\'re safely using an apostrophe in single quotes.'

Wir können auch Anführungszeichen in Zeichenfolgen verwenden, die mit "+" + "erstellt wurden.

"Then he said, \"Hello, World!\"";

Diese Methode sieht ein bisschen chaotischer aus, aber Sie müssen möglicherweise sowohl einen Apostroph als auch ein Anführungszeichen in derselben Zeichenfolge verwenden, wodurch ein Escape-Vorgang erforderlich wird.

Vorlagenliterale verwenden

Vorlagenliterale werden mit Backticks definiert, und daher können sowohl Anführungszeichen als auch Apostrophe sicher verwendet werden, ohne dass zusätzliche Überlegungen angestellt werden müssen.

`We're safely using apostrophes and "quotes" in a template literal.`;

Vorlagenliterale verhindern nicht nur das Entkommen von Zeichen und ermöglichen eingebettete Ausdrücke, sondern bieten auch Unterstützung für mehrere Zeilen. Dies wird unter https://www.digitalocean.com/community/tutorials/how-to-work- erläutert. with-strings-in-javascript # long-strings-and-newlines [nächster abschnitt].

Bei alternierender Zeichenfolgensyntax, Verwendung von Escapezeichen und Verwendung von Vorlagenliteralen gibt es verschiedene Möglichkeiten, eine Zeichenfolge sicher zu erstellen.

Lange Streicher und Zeilenumbrüche

Es kann vorkommen, dass Sie ein Zeilenumbruchzeichen oder einen Zeilenumbruch in Ihre Zeichenfolge einfügen möchten. Die Escape-Zeichen + \ n + oder + \ r + können verwendet werden, um eine neue Zeile in die Ausgabe des Codes einzufügen.

const threeLines = "This is a string\nthat spans across\nthree lines.";
OutputThis is a string
that spans across
three lines.

Dies funktioniert technisch, um unsere Ausgabe in mehreren Zeilen zu erhalten. Das Schreiben einer sehr langen Zeichenfolge in einer einzelnen Zeile wird jedoch schnell sehr schwer zu lesen und zu verarbeiten sein. Wir können den Verkettungsoperator verwenden, um die Zeichenfolge in mehreren Zeilen anzuzeigen.

const threeLines = "This is a string\n" +
"that spans across\n" +
"three lines.";

Anstatt mehrere Zeichenfolgen zu verketten, können wir das Escape-Zeichen "+ \ +" verwenden, um die neue Zeile zu maskieren.

const threeLines = "This is a string\n\
that spans across\n\
three lines.";

Um den Code besser lesbar zu machen, können wir stattdessen Vorlagenliteralzeichenfolgen verwenden. Dadurch entfällt die Notwendigkeit, lange Zeichenfolgen, die Zeilenumbrüche enthalten, zu verketten oder zu maskieren. Die Zeichenfolge sowie die Zeilenumbrüche bleiben erhalten.

const threeLines = `This is a string
that spans across
three lines.`;
OutputThis is a string
that spans across
three lines.

Es ist wichtig, alle Möglichkeiten zum Erstellen von Zeilenumbrüchen und Zeichenfolgen zu kennen, die sich über mehrere Zeilen erstrecken, da verschiedene Codebasen möglicherweise verschiedene Standards verwenden.

Fazit

In diesem Artikel haben wir die Grundlagen des Arbeitens mit Zeichenfolgen in JavaScript erläutert: Erstellen und Anzeigen von Zeichenfolgenliteralen in einfachen und doppelten Anführungszeichen, Erstellen von Vorlagenliteralen, Verketten, Escape-Zeichen und Zuweisen von Zeichenfolgenwerten zu Variablen.

Related