Nützliche String-Methoden

Nachdem wir uns die Grundlagen von Strings angesehen haben, lassen Sie uns einen Gang höher schalten und darüber nachdenken, welche nützlichen Operationen wir mit eingebauten Methoden an Strings ausführen können, wie z.B. die Länge eines Textstrings finden, Strings zusammenführen und teilen, ein Zeichen in einem String durch ein anderes ersetzen und mehr.

Voraussetzungen: Verständnis von HTML und den Grundlagen von CSS. Kenntnisse der Grundlagen von Strings.
Lernziele: Manipulation von Strings mit Hilfe von gängigen Eigenschaften und Methoden, die in JavaScript eingebaut sind.

Strings als Objekte

Die meisten Werte können in JavaScript so verwendet werden, als wären sie Objekte. Wenn Sie beispielsweise einen String erstellen, indem Sie

js
const string = "This is my string";

obwohl die Variable selbst kein Objekt ist, stehen ihr dennoch aufgrund der Möglichkeit, beim Zugriff auf Eigenschaften als Objekt genutzt zu werden, eine Vielzahl von Eigenschaften und Methoden zur Verfügung. Sie können dies sehen, wenn Sie zur Seite des String Objekts gehen und die Liste auf der Seite durchsehen!

Bevor Ihr Gehirn schmilzt, keine Sorge! Sie müssen die meisten dieser Informationen zu Beginn Ihrer Lernreise nicht unbedingt kennen. Aber es gibt einige Methoden, die Sie möglicherweise häufig verwenden, und die werden wir uns hier ansehen.

Lassen Sie uns einige Beispiele in die Entwicklerkonsole des Browsers eingeben.

Die Länge eines Strings ermitteln

Das ist einfach — Sie verwenden die length Eigenschaft. Versuchen Sie die Eingabe der folgenden Zeilen:

js
const browserType = "mozilla";
browserType.length;

Dies sollte die Zahl 7 zurückgeben, da "mozilla" 7 Zeichen lang ist. Das ist aus vielen Gründen nützlich; beispielsweise könnten Sie die Längen einer Reihe von Namen ermitteln, um sie in Längenreihenfolge anzuzeigen, oder einem Benutzer mitteilen, dass ein Benutzername, den er in ein Formularfeld eingegeben hat, zu lang ist, wenn er eine bestimmte Länge überschreitet.

Ein spezifisches Zeichen im String abrufen

In einem verwandten Punkt können Sie jedes Zeichen in einem String zurückgeben, indem Sie die eckige Klammern Notation verwenden — das bedeutet, dass Sie eckige Klammern ([]) am Ende Ihres Variablennamens hinzufügen. Innerhalb der eckigen Klammern geben Sie die Nummer des Zeichens an, das Sie zurückgeben möchten, also um beispielsweise den ersten Buchstaben abzurufen, würden Sie dies tun:

js
browserType[0];

Denken Sie daran: Computer zählen ab 0, nicht ab 1!

Um das letzte Zeichen eines beliebigen Strings zu erhalten, könnten wir die folgende Zeile verwenden, indem wir diese Technik mit der length Eigenschaft kombinieren, die wir oben betrachtet haben:

js
browserType[browserType.length - 1];

Die Länge des Strings "mozilla" ist 7, aber da die Zählung bei 0 beginnt, ist die Position des letzten Zeichens 6; mit length-1 erhalten wir das letzte Zeichen.

Testen, ob ein String ein Substring enthält

Manchmal möchten Sie feststellen, ob ein kleinerer String in einem größeren vorhanden ist (wir sagen im Allgemeinen, ob ein Substring in einem String vorhanden ist). Dies kann mit der Methode includes() erreicht werden, die einen einzelnen Parameter annimmt — den Substring, den Sie suchen möchten.

Sie gibt true zurück, wenn der String den Substring enthält, und false, wenn nicht.

js
const browserType = "mozilla";

if (browserType.includes("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

Oft möchten Sie wissen, ob ein String mit einem bestimmten Substring beginnt oder endet. Dies ist ein häufiges Anliegen, weshalb es zwei spezielle Methoden dafür gibt: startsWith() und endsWith():

js
const browserType = "mozilla";

if (browserType.startsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}
js
const browserType = "mozilla";

if (browserType.endsWith("zilla")) {
  console.log("Found zilla!");
} else {
  console.log("No zilla here!");
}

Die Position eines Substrings in einem String finden

Sie können die Position eines Substrings in einem größeren String mit der Methode indexOf() finden. Diese Methode nimmt zwei Parameter an – den Substring, den Sie suchen möchten, und einen optionalen Parameter, der den Startpunkt der Suche angibt.

Wenn der String den Substring enthält, gibt indexOf() den Index des ersten Vorkommens des Substrings zurück. Wenn der String den Substring nicht enthält, gibt indexOf() -1 zurück.

js
const tagline = "MDN - Resources for developers, by developers";
console.log(tagline.indexOf("developers")); // 20

Beginnend bei 0, wenn Sie die Anzahl der Zeichen (einschließlich des Leerzeichens) vom Anfang des Strings zählen, ist das erste Vorkommen des Substrings "developers" an der Stelle 20.

js
console.log(tagline.indexOf("x")); // -1

Dies hingegen gibt -1 zurück, da das Zeichen x nicht im String vorhanden ist.

Nun, da Sie wissen, wie Sie das erste Vorkommen eines Substrings finden, wie gehen Sie vor, um nachfolgenden Vorkommen zu finden? Das können Sie tun, indem Sie einen Wert übergeben, der größer ist als der Index des vorherigen Vorkommens, als zweiten Parameter an die Methode.

js
const firstOccurrence = tagline.indexOf("developers");
const secondOccurrence = tagline.indexOf("developers", firstOccurrence + 1);

console.log(firstOccurrence); // 20
console.log(secondOccurrence); // 35

Hier weisen wir die Methode an, nach dem Substring "developers" ab dem Index 21 (firstOccurrence + 1) zu suchen, und es wird der Index 35 zurückgegeben.

Extrahieren eines Substrings aus einem String

Sie können einen Substring aus einem String mit der Methode slice() extrahieren. Sie übergeben:

  • Den Index, bei dem Sie mit dem Extrahieren beginnen
  • Den Index, bei dem Sie das Extrahieren beenden. Dieser Index ist exklusiv, d.h. das Zeichen bei diesem Index wird nicht in den extrahierten Substring aufgenommen.

Zum Beispiel:

js
const browserType = "mozilla";
console.log(browserType.slice(1, 4)); // "ozi"

Das Zeichen an Index 1 ist "o", und das Zeichen an Index 4 ist "l". So extrahieren wir alle Zeichen beginnend bei "o" und endend unmittelbar vor "l", was uns "ozi" ergibt.

Wenn Sie wissen, dass Sie alle verbleibenden Zeichen in einem String nach einem bestimmten Zeichen extrahieren möchten, müssen Sie den zweiten Parameter nicht angeben. Stattdessen müssen Sie nur die Zeichenposition angeben, von der aus Sie die verbleibenden Zeichen im String extrahieren möchten. Versuchen Sie das Folgende:

js
browserType.slice(2); // "zilla"

Dies gibt "zilla" zurück — denn die Zeichenposition 2 ist der Buchstabe "z", und da Sie keinen zweiten Parameter angegeben haben, waren alle verbleibenden Zeichen im String Teil des zurückgegebenen Substrings.

Hinweis: slice() hat auch weitere Optionen; studieren Sie die Seite slice(), um herauszufinden, was Sie sonst noch entdecken können.

Ändern der Groß- und Kleinschreibung

Die String-Methoden toLowerCase() und toUpperCase() nehmen einen String und konvertieren alle Zeichen in Klein- bzw. Großbuchstaben. Das kann nützlich sein, wenn Sie beispielsweise alle Benutzerdaten vor dem Speichern in einer Datenbank normalisieren möchten.

Versuchen Sie, die folgenden Zeilen einzugeben, um zu sehen, was passiert:

js
const radData = "My NaMe Is MuD";
console.log(radData.toLowerCase());
console.log(radData.toUpperCase());

Aktualisieren von Teilen eines Strings

Sie können einen Substring innerhalb eines Strings durch einen anderen Substring ersetzen, indem Sie die Methode replace() verwenden.

In diesem Beispiel geben wir zwei Parameter an — den String, den wir ersetzen möchten, und den String, mit dem wir ihn ersetzen möchten:

js
const browserType = "mozilla";
const updated = browserType.replace("moz", "van");

console.log(updated); // "vanilla"
console.log(browserType); // "mozilla"

Beachten Sie, dass replace() wie viele String-Methoden den String, auf dem sie aufgerufen wurde, nicht ändert, sondern einen neuen String zurückgibt. Wenn Sie das ursprüngliche browserType-Variable aktualisieren möchten, müssten Sie Folgendes tun:

js
let browserType = "mozilla";
browserType = browserType.replace("moz", "van");

console.log(browserType); // "vanilla"

Beachten Sie auch, dass wir browserType jetzt mit let und nicht const deklarieren müssen, da wir es neu zuweisen.

Seien Sie sich bewusst, dass replace() in dieser Form nur das erste Vorkommen des Substrings ändert. Wenn Sie alle Vorkommen ändern möchten, können Sie replaceAll() verwenden:

js
let quote = "To be or not to be";
quote = quote.replaceAll("be", "code");

console.log(quote); // "To code or not to code"

Aktive Lernbeispiele

In diesem Abschnitt werden wir Ihnen einige Übungen anbieten, um String-Manipulationscode zu schreiben. In jeder Übung unten haben wir ein Array von Strings und eine Schleife, die jeden Wert im Array verarbeitet und in einer Liste mit Aufzählungszeichen anzeigt. Sie müssen Arrays oder Schleifen jetzt nicht verstehen — diese werden in zukünftigen Artikeln erklärt. Alles, was Sie in jedem Fall tun müssen, ist, den Code zu schreiben, der die Strings im gewünschten Format ausgibt.

Jedes Beispiel enthält einen "Zurücksetzen"-Button, den Sie verwenden können, um den Code zurückzusetzen, falls Sie einen Fehler machen und ihn nicht wiederherstellen können, und einen "Lösung anzeigen"-Button, den Sie drücken können, um eine mögliche Antwort zu sehen, wenn Sie wirklich nicht weiterkommen.

Ausfiltern von Grußbotschaften

In der ersten Übung beginnen wir einfach — wir haben ein Array von Grußkartenbotschaften, aber wir möchten sie sortieren, um nur die Weihnachtsbotschaften aufzulisten. Wir möchten, dass Sie einen Bedingungstest innerhalb der if ()-Struktur ausfüllen, um jeden String zu testen und nur dann in der Liste auszugeben, wenn es sich um eine Weihnachtsbotschaft handelt.

Überlegen Sie, wie Sie testen könnten, ob die Nachricht in jedem Fall eine Weihnachtsbotschaft ist. Welcher String ist in all diesen Nachrichten vorhanden, und welche Methode könnten Sie verwenden, um zu testen, ob er vorhanden ist?

Korrektur der Groß- und Kleinschreibung

In dieser Übung haben wir die Namen von Städten im Vereinigten Königreich, aber die Groß- und Kleinschreibung ist völlig durcheinander. Wir möchten, dass Sie sie so ändern, dass sie alle klein geschrieben sind, außer einem großen Anfangsbuchstaben. Eine gute Vorgehensweise dazu wäre:

  1. Konvertieren Sie den gesamten String, der in der city-Variablen enthalten ist, in Kleinbuchstaben und speichern Sie ihn in einer neuen Variablen.
  2. Holen Sie den ersten Buchstaben des Strings in dieser neuen Variablen und speichern Sie ihn in einer anderen Variablen.
  3. Ersetzen Sie mit dieser letzten Variablen als Substring den ersten Buchstaben des Kleinbuchstaben-Strings durch den ersten Buchstaben des Kleinbuchstaben-Strings, der nun in Großbuchstaben ist. Speichern Sie das Ergebnis dieses Ersetzungsverfahrens in einer weiteren neuen Variablen.
  4. Ändern Sie den Wert der result-Variablen so, dass er dem Endergebnis entspricht, nicht city.

Hinweis: Ein Hinweis — die Parameter der String-Methoden müssen keine String-Literale sein; sie können auch Variablen oder sogar Variablen mit einer auf ihnen aufgerufenen Methode sein.

Neue Strings aus alten Teilen erstellen

In dieser letzten Übung enthält das Array eine Reihe von Strings mit Informationen über Bahnhöfe im Norden Englands. Die Strings sind Datenelemente, die den dreibuchstabigen Stationscode, gefolgt von einigen maschinenlesbaren Daten, gefolgt von einem Semikolon, gefolgt vom menschenlesbaren Stationsnamen enthalten. Zum Beispiel:

MAN675847583748sjt567654;Manchester Piccadilly

Wir möchten den Stationscode und den Namen extrahieren und sie in einem String mit der folgenden Struktur zusammenführen:

MAN: Manchester Piccadilly

Wir empfehlen es so zu tun:

  1. Extrahieren Sie den dreibuchstabigen Stationscode und speichern Sie ihn in einer neuen Variablen.
  2. Finden Sie die Zeichenindexnummer des Semikolons heraus.
  3. Extrahieren Sie den menschenlesbaren Stationsnamen mit der Zeichenindexnummer des Semikolons als Referenzpunkt und speichern Sie ihn in einer neuen Variablen.
  4. Verbinden Sie die beiden neuen Variablen und ein String-Literal, um den endgültigen String zu erzeugen.
  5. Ändern Sie den Wert der result-Variablen auf den endgültigen String, nicht auf den station.

Testen Sie Ihre Fähigkeiten!

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Strings.

Fazit

Sie können nicht ignorieren, dass die Fähigkeit, Wörter und Sätze in der Programmierung zu verwalten, sehr wichtig ist — besonders in JavaScript, da es bei Websites darum geht, mit Menschen zu kommunizieren. Dieser Artikel hat Ihnen die Grundlagen vermittelt, die Sie derzeit über die Manipulation von Strings wissen müssen. Diese sollten Ihnen gut dienen, wenn Sie sich intensiveren Themen in der Zukunft zuwenden. Als Nächstes werden wir den letzten wesentlichen Datentyp betrachten, auf den wir uns kurzfristig konzentrieren müssen – Arrays.