Handhabung von Text — Zeichenketten in JavaScript

Die Macht der Worte

Worte sind für Menschen sehr wichtig — sie sind ein großer Teil unserer Kommunikation. Da das Web ein größtenteils textbasiertes Medium ist, das es Menschen ermöglicht, Informationen zu kommunizieren und zu teilen, ist es nützlich für uns, die Kontrolle über die darauf erscheinenden Worte zu haben. HTML bietet Struktur und Bedeutung für Text, CSS ermöglicht es uns, ihn präzise zu gestalten, und JavaScript bietet viele Funktionen zur Manipulation von Zeichenketten. Dazu gehört das Erstellen benutzerdefinierter Willkommensnachrichten und Eingabeaufforderungen, das Anzeigen der richtigen Textbeschriftungen bei Bedarf, das Sortieren von Begriffen in der gewünschten Reihenfolge und vieles mehr.

Praktisch alle Programme, die wir Ihnen bisher im Kurs gezeigt haben, beinhalteten einige Zeichenkettenmanipulationen.

Deklarieren von Zeichenketten

Zeichenketten werden zunächst ähnlich wie Zahlen behandelt, aber wenn Sie tiefer graben, werden Sie einige bemerkenswerte Unterschiede feststellen. Beginnen wir damit, einige grundlegende Zeilen in die Browser-Entwicklungskonsole einzugeben, um uns damit vertraut zu machen.

Geben Sie zum Starten die folgenden Zeilen ein:

const string = "The revolution will not be televised.";
console.log(string);

Genauso wie bei Zahlen deklarieren wir eine Variable, initialisieren sie mit einem Zeichenkettenwert und geben dann den Wert zurück. Der einzige Unterschied hier ist, dass Sie beim Schreiben einer Zeichenkette den Wert mit Anführungszeichen umgeben müssen.

Wenn Sie dies nicht tun oder eines der Anführungszeichen vergessen, erhalten Sie einen Fehler. Versuchen Sie, die folgenden Zeilen einzugeben:

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

Diese Zeilen funktionieren nicht, da jeder Text ohne ihn umgebende Anführungszeichen als Variablenname, Eigenschaftsname, reserviertes Wort oder Ähnliches interpretiert wird. Wenn der Browser den nicht umschlossenen Text nicht erkennt, wird ein Fehler ausgelöst (z. B. "fehlendes; vor Anweisung"). Wenn der Browser erkennt, wo eine Zeichenkette beginnt, aber nicht wo sie endet (aufgrund des fehlenden zweiten Anführungszeichens), wird ein Fehler "nicht terminierte Zeichenfolge" gemeldet. Wenn Ihr Programm solche Fehler auslöst, gehen Sie zurück und überprüfen Sie alle Ihre Zeichenketten, um sicherzustellen, dass keine Anführungszeichen fehlen.

Folgendes funktioniert, wenn Sie vorher die Variable string definiert haben — probieren Sie es jetzt:

const badString = string;
console.log(badString);

badString ist jetzt so gesetzt, dass sie den gleichen Wert wie string hat.

Einfache Anführungszeichen, doppelte Anführungszeichen und Backticks

In JavaScript können Sie einfache Anführungszeichen ('), doppelte Anführungszeichen (") oder Backticks (`) wählen, um Ihre Zeichenketten einzuschließen. Alle folgenden Beispiele funktionieren:

const single = 'Single quotes';
const double = "Double quotes";
const backtick = `Backtick`;

console.log(single);
console.log(double);
console.log(backtick);

Sie müssen dasselbe Zeichen für den Anfang und das Ende einer Zeichenkette verwenden, sonst erhalten Sie einen Fehler:

const badQuotes = 'This is not allowed!";

Zeichenketten, die mit einfachen Anführungszeichen deklariert werden, und Zeichenketten, die mit doppelten Anführungszeichen deklariert werden, sind gleich, und welche Sie verwenden, hängt von der persönlichen Präferenz ab — es ist jedoch gute Praxis, einen Stil zu wählen und diesen konsistent in Ihrem Code zu verwenden.

Mit Backticks deklarierte Zeichenketten sind eine besondere Art von Zeichenkette, genannt Template Literals. Template Literals sind in den meisten Aspekten normale Zeichenketten, haben aber einige besondere Eigenschaften:

• Sie können JavaScript einbetten
• Sie können Template Literals über mehrere Zeilen deklarieren

JavaScript einbetten

In einem Template Literal können Sie JavaScript-Variablen oder -Ausdrücke in ${ } einschließen, und das Ergebnis wird in die Zeichenkette aufgenommen:

const name = "Chris";
const greeting = `Hello, ${name}`;
console.log(greeting); // "Hello, Chris"

Sie können dieselbe Technik verwenden, um zwei Variablen zusammenzufügen:

const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); // "Hello, how are you?"

Das Zusammenfügen von Zeichenketten auf diese Weise nennt man Konkatenation.

Konkatenation im Kontext

Werfen wir einen Blick darauf, wie Konkatenation in der Praxis verwendet wird:

<button>Press me</button>
<div id="greeting"></div>

const button = document.querySelector("button");

function greet() {
  const name = prompt("What is your name?");
  const greeting = document.querySelector("#greeting");
  greeting.textContent = `Hello ${name}, nice to see you!`;
}

button.addEventListener("click", greet);

Hier verwenden wir die Funktion window.prompt(), die den Benutzer auffordert, eine Frage über ein Popup-Dialogfeld zu beantworten und dann den von ihm eingegebenen Text in einer gegebenen Variable zu speichern — in diesem Fall name. Anschließend zeigen wir eine Zeichenkette an, die den Namen in eine generische Begrüßungsnachricht einfügt.

Konkatenation mit "+"

Sie können ${} nur mit Template Literals verwenden, nicht mit normalen Zeichenketten. Sie können normale Zeichenketten mit dem + Operator verknüpfen:

const greeting = "Hello";
const name = "Chris";
console.log(greeting + ", " + name); // "Hello, Chris"

Allerdings bieten Template Literals in der Regel besser lesbaren Code:

const greeting = "Hello";
const name = "Chris";
console.log(`${greeting}, ${name}`); // "Hello, Chris"

Einschließen von Ausdrücken in Zeichenketten

Sie können JavaScript-Ausdrücke in Template Literals einfügen, ebenso wie nur Variablen, und die Ergebnisse werden im Ergebnis enthalten sein:

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
  (score / highestScore) * 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."

Mehrzeilige Zeichenketten

Template Literals respektieren die Zeilenumbrüche im Quellcode, sodass Sie Zeichenketten über mehrere Zeilen wie folgt schreiben können:

const newline = `One day you finally knew
what you had to do, and began,`;
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

Um die äquivalente Ausgabe mit einer normalen Zeichenkette zu erhalten, müssten Sie Zeilenumbruchzeichen (\n) in die Zeichenkette einfügen:

const newline = "One day you finally knew\nwhat you had to do, and began,";
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

Weitere Beispiele und Details zu den erweiterten Funktionen finden Sie auf unserer Template Literals Referenzseite.

Einschließen von Anführungszeichen in Zeichenketten

Da wir Anführungszeichen verwenden, um den Anfang und das Ende von Zeichenketten anzuzeigen, wie können wir tatsächliche Anführungszeichen in Zeichenketten einfügen? Wir wissen, dass dies nicht funktioniert:

const badQuotes = "She said "I think so!"";

Eine gängige Option besteht darin, eine der anderen Zeichen zu verwenden, um die Zeichenkette zu deklarieren:

const goodQuotes1 = 'She said "I think so!"';
const goodQuotes2 = `She said "I'm not going in there!"`;

Eine andere Option besteht darin, das problematische Anführungszeichen zu escapen. Das Escapen von Zeichen bedeutet, dass wir etwas mit ihnen machen, damit sie als Text und nicht als Code erkannt werden. In JavaScript machen wir das, indem wir direkt vor dem Zeichen einen Backslash setzen. Versuchen Sie dies:

const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);

Sie können dieselbe Technik verwenden, um andere Sonderzeichen einzufügen. Weitere Informationen finden Sie unter Escape-Sequenzen.

Zahlen vs. Zeichenketten

Was passiert, wenn wir versuchen, eine Zeichenkette und eine Zahl zu konkatenieren? Versuchen wir es in unserer Konsole:

const name = "Front ";
const number = 242;
console.log(name + number); // "Front 242"

Sie könnten erwarten, dass dies einen Fehler zurückgibt, aber es funktioniert einwandfrei. Wie Zahlen als Zeichenketten angezeigt werden sollen, ist ziemlich gut definiert, sodass der Browser die Zahl automatisch in eine Zeichenkette umwandelt und die beiden Zeichenketten konkateniert.

Wenn Sie eine numerische Variable haben, die Sie in eine Zeichenkette umwandeln möchten, oder eine Zeichenkettenvariable, die Sie in eine Zahl umwandeln möchten, können Sie die folgenden zwei Konstrukte verwenden:

• Die Funktion Number() konvertiert alles, was ihr übergeben wird, in eine Zahl, wenn möglich. Versuchen Sie Folgendes:

  js

  const myString = "123";
  const myNum = Number(myString);
  console.log(typeof myNum);
  // number
  

• Umgekehrt konvertiert die Funktion String() ihr Argument in eine Zeichenkette. Versuchen Sie dies:

  js

  const myNum2 = 123;
  const myString2 = String(myNum2);
  console.log(typeof myString2);
  // string
  

Diese Konstrukte können in manchen Situationen wirklich nützlich sein. Wenn ein Benutzer beispielsweise eine Zahl in ein Textfeld eines Formulars eingibt, ist dies eine Zeichenkette. Wenn Sie diese Zahl jedoch zu etwas addieren möchten, müssen Sie sie in eine Zahl umwandeln, also könnten Sie sie durch Number() leiten, um dies zu handhaben. Genau das haben wir in unserem Zahlenratespiel gemacht, in der Funktion checkGuess.

Zusammenfassung

Das sind die Grundlagen von Zeichenketten in JavaScript. Im nächsten Artikel werden wir darauf aufbauen und einige der eingebauten Methoden betrachten, die für Zeichenketten in JavaScript verfügbar sind, und wie wir sie verwenden können, um unsere Zeichenketten in genau die gewünschte Form zu bringen.

• Zurück
• Übersicht: Dynamisches Scripting mit JavaScript
• Weiter