Überprüfung von Teilstrings in JavaScript: 3 Methoden für Anfänger

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

«Enthält dieser String dieses Wort?» — eine Frage, die jeden Anfänger quält

Sie schreiben ein Skript, erhalten eine Antwort vom Server oder filtern einfach eine Liste von Städten. Und plötzlich stehen Sie vor einem Rätsel: Wie prüft man, ob ein String einen bestimmten Teilstring in JavaScript enthält? Diese Frage ist ein echter Hit auf Stack Overflow, Tausende von Entwicklern stellen sie. Und das zu Recht: Strings sind die Grundlage jeder Anwendung, und die Fähigkeit, schnell Teilstrings in ihnen zu finden, ist eine grundlegende Fertigkeit.

In diesem Tutorial behandeln wir drei funktionierende Methoden: von der modernsten (und von allen geliebten) bis zur klassischen mit Extras. Sie erfahren, wann Sie welche Methode verwenden sollten, und lernen, Code zu schreiben, den Sie bei einem Vorstellungsgespräch zeigen können.

\n\n

Methode Nr. 1: `includes()` — Einfachheit und Eleganz

Wenn Sie Code in modernem JavaScript (ES6 und höher) schreiben, ist includes() Ihr bester Freund. Diese Methode gibt true oder false zurück und liest sich wie eine normale englische Frage: «Enthält der String den Teilstring?».

\n\n

Syntax

string.includes(searchString, position)

searchString — das, wonach wir suchen (erforderlich).
position — optionaler Parameter, ab welchem Index die Suche beginnen soll (Standardwert 0).

\n\n

Beispiel in Aktion

const message = "Hallo, Welt! JavaScript ist cool.";\n\nconsole.log(message.includes("JavaScript")); // true\nconsole.log(message.includes("Python"));     // false\nconsole.log(message.includes("Welt", 10));    // false (Suche ab dem 10. Zeichen)\n

Beachten Sie: Die Methode ist groß-/kleinschreibungsabhängig. "javascript" und "JavaScript" sind unterschiedliche Strings. Wenn Sie die Groß-/Kleinschreibung ignorieren müssen, wandeln Sie einfach beide Strings in Kleinbuchstaben um:

const text = "Wir lernen JavaScript";\nconst keyword = "javascript";\n\nconsole.log(text.toLowerCase().includes(keyword.toLowerCase())); // true\n

\n\n

Wann verwenden

Formularvalidierung (Überprüfung einer E-Mail auf "@").
Suche in einer Liste (Filterung von Produkten).
Jede einfache Prüfung auf Vorhandensein.

\n\n

Methode Nr. 2: `indexOf()` — ein Klassiker, der nie stirbt

Vor dem Erscheinen von includes() verwendeten alle indexOf(). Es sagt nicht nur «ja/nein», sondern gibt den Index des ersten Vorkommens des Teilstrings zurück. Wenn der Teilstring nicht gefunden wird, gibt es -1 zurück.

\n\n

Syntax

string.indexOf(searchValue, fromIndex)

\n\n

Beispiel

const sentence = "Ich liebe JavaScript und Python.";\n\nconsole.log(sentence.indexOf("liebe")); // 2\nconsole.log(sentence.indexOf("Ruby"));  // -1\n\n// Prüfung auf Vorhandensein\nif (sentence.indexOf("JavaScript") !== -1) {\n    console.log("Ja, der String enthält JavaScript!");\n}\n

\n\n

Kniffliger Punkt: Warum nicht `!== -1`?

Viele Anfänger schreiben if (str.indexOf("word")) — und das ist ein Fehler. Wenn sich der Teilstring ganz am Anfang befindet (Index 0), wird die Bedingung if (0) als false gewertet. Vergleichen Sie immer mit -1.

\n\n

Wann `indexOf()` anstelle von `includes()` verwenden

Wenn Sie den Index des Anfangs des Teilstrings benötigen (z. B. um einen Teil des Strings auszuschneiden).
Arbeit mit altem Code (IE und alte Browserversionen).
Wenn Sie alle Vorkommen finden müssen (in einer Schleife mit Änderung von fromIndex).

\n\n

Methode Nr. 3: `search()` und RegExp — wenn Sie Flexibilität brauchen

Was aber, wenn Sie nicht nur ein Wort, sondern ein Muster finden müssen? Zum Beispiel «alle Wörter, die mit "JS" beginnen» oder «eine Telefonnummer im Format +7-xxx-xxx-xx-xx». Hier kommen reguläre Ausdrücke und die Methode search() zur Hilfe.

\n\n