JavaScript-String-Methoden erklärt: substr vs substring vs slice (Best Practices & moderne Nutzung)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung

JavaScript ist eine wesentliche Programmiersprache in der Webentwicklung. Insbesondere wird die Zeichenkettenmanipulation häufig für die Formatierung von Daten, Analysen und das dynamische Aktualisieren der Benutzeroberfläche verwendet.
In diesem Artikel erklären wir drei häufig verwendete JavaScript‑String‑Methoden—substr, substring und slice—im Detail. Da diese Methoden ähnliche Funktionalität bieten, hilft das Verständnis ihrer Unterschiede dabei, die passende Methode für jede Situation zu wählen.
Wir werden außerdem erläutern, warum substr veraltet ist, alternative Ansätze vorstellen und praktische Ratschläge zum Schreiben von JavaScript nach modernen Best Practices geben.

2. Grundlegende Informationen und Verwendung jeder Methode

Dieser Abschnitt erklärt die grundlegende Syntax und Verwendung von substr, substring und slice. Das Verständnis dieser Methoden hilft Ihnen, die passende Methode zu wählen und die Lesbarkeit sowie Wartbarkeit des Codes zu verbessern.

2.1 substr‑Methode

Syntax:

string.substr(start, length)

Beschreibung:

• start : Gibt den Startindex für die Extraktion an (0‑basiert).
• length : Gibt die Anzahl der zu extrahierenden Zeichen an. Wird sie weggelassen, wird bis zum Ende der Zeichenkette extrahiert.

Beispielverwendung:

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

Hinweis:
Die substr‑Methode ist veraltet und es wird empfohlen, sie in zukünftigem Code zu vermeiden. Verwenden Sie stattdessen slice oder substring.

Alternatives Beispiel (mit slice):

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 substring‑Methode

Syntax:

string.substring(start, end)

Beschreibung:

• start : Startindex der Extraktion.
• end : Endindex (das Zeichen an diesem Index wird nicht einbezogen).

Beispielverwendung:

let str = "JavaScript";
console.log(str.substring(0, 4)); // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

Hinweise:

1. Die Reihenfolge der Argumente wird automatisch korrigiert: Wenn Sie substring(10, 4) aufrufen, wird es als substring(4, 10) behandelt.
2. Negative Werte werden ignoriert: Jeder negative Parameter wird als 0 behandelt.

Alternatives Beispiel, wenn negative Werte benötigt werden (mit slice):

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 slice‑Methode

Syntax:

string.slice(start, end)

Beschreibung:

• start : Startindex der Extraktion.
• end : Endindex (das Zeichen an diesem Index wird nicht einbezogen).

Beispielverwendung:

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

Hinweise:

1. Unterstützt negative Werte: Negative Indizes zählen vom Ende der Zeichenkette.
2. Funktioniert sowohl für Zeichenketten als auch für Arrays: Es kann auch Elemente aus Arrays extrahieren, was es sehr vielseitig macht.

3. Vergleichstabelle der Methoden

Auswahl der richtigen Methode nach Anwendungsfall:

• Kurze Segmente extrahieren: → slice
• Wenn negative Werte benötigt werden: → slice
• Kompatibilität mit Legacy‑Code: → substr vermeiden; bei Bedarf migrieren

4. Praktische Code‑Beispiele

Grundlegende Zeichenkettenmanipulation

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

Werte anhand eines Musters extrahieren

let url = "https://example.com/index.html";

// Get the file name
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. Umgang mit veralteten Methoden

Die substr‑Methode von JavaScript ist veraltet. Das liegt daran, dass substr in den neuesten ECMAScript‑Spezifikationen als nicht empfohlene Methode eingestuft wurde.
Dieser Abschnitt erklärt die Probleme mit substr, alternative Methoden und wie Sie Ihren Code migrieren können.

5.1 Warum ist substr veraltet?

1. Schlechte Lesbarkeit:

• substr verwendet das zweite Argument als „Anzahl der zu extrahierenden Zeichen“, was von anderen Methoden, die einen End‑Index verwenden, abweicht. Diese Inkonsistenz erschwert das Verständnis des Codes.

1. Mögliche zukünftige Kompatibilitätsprobleme durch Spezifikationsänderungen:

• Ältere Features werden während der ECMAScript‑Standardisierung als veraltet markiert. Neuer Code sollte nicht darauf vertrauen.

1. Keine Unterstützung für negative Werte:

• substr unterstützt keine negativen Indizes, slice hingegen schon.

5.2 Wie man zu modernen Methoden migriert

Fall 1: Extrahieren eines Substrings fester Länge

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // "Java"

// Recommended (slice)
console.log(str.slice(0, 4)); // "Java"

Fall 2: Extrahieren des Endes eines Strings

// Deprecated code
console.log(str.substr(-6)); // Error (negative not supported)

// Recommended (slice)
console.log(str.slice(-6)); // "Script"

Fall 3: Extrahieren eines Teils einer URL oder eines Dateinamens

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // "index.html"

// Recommended (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // "index.html"

5.3 Refactoring‑Punkte für Legacy‑Code

1. Code‑Scan durchführen:

• Werkzeuge wie ESLint verwenden, um Stellen zu finden, an denen substr genutzt wird.

1. Testabdeckung stärken:

• Unit‑Tests einsetzen, um sicherzustellen, dass das Verhalten nach dem Ersetzen der Methoden korrekt bleibt.

1. Schrittweise migrieren:

• Ersatz in wichtigen oder häufig ausgeführten Bereichen priorisieren.

5.4 Vorteile der Migration von substr

1. Verbesserte Lesbarkeit und Wartbarkeit:

• Die Absicht des Codes wird klarer, was das Teamverständnis erhöht.

1. Kompatibilität mit modernen Standards:

• Die Einhaltung von ECMAScript‑Standards sorgt für langfristige Stabilität.

1. Flexible Unterstützung für negative Werte:

• slice ermöglicht eine kompakte Extraktion sowohl von Anfangs‑ als auch Endpositionen.

6. Häufig gestellte Fragen (FAQ)

Dieser Abschnitt fasst gängige Fragen und Antworten zu JavaScript‑String‑Manipulationsmethoden zusammen.

Q1: Kann ich substr noch verwenden?

A: Ja, die meisten modernen Browser unterstützen substr weiterhin.
Allerdings sollte es, da ECMAScript es als veraltet markiert, in neuen Projekten oder Codebasen, die zukünftige Kompatibilität benötigen, vermieden werden.
Empfohlene Alternative:

let str = "JavaScript";
console.log(str.slice(0, 4)); // "Java"

Q2: Was ist der Unterschied zwischen slice und substring?

A: Die nachstehende Tabelle fasst ihre Unterschiede zusammen:

Beispiele:

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3: Welche Risiken birgt die weitere Nutzung veralteter Methoden?

A:

1. Mögliche Entfernung der Browser‑Unterstützung: substr könnte irgendwann nicht mehr unterstützt werden.
2. Erhöhte Wartungskosten: Das Debuggen veralteter Features kostet zusätzlichen Aufwand.
3. Niedrigere Code‑Qualität: Das Ignorieren moderner Standards reduziert die Lesbarkeit.

Q4: Welche Methode ist am besten für lange Strings?

A: slice ist am besten, weil es negative Indizes unterstützt und hohe Flexibilität bietet.
Beispiel:

let longText = "This is a very long text string used for testing purposes.";

// First 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Wie kann ich rückwärts zählen, indem ich negative Werte verwende?

A: Verwende slice, da substring negative Werte als 0 behandelt.
Beispiel:

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

// substring treats negative as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: Gibt es Leistungsunterschiede?

A: Moderne Browser zeigen keine wesentlichen Leistungsunterschiede zwischen slice, substring oder substr. Da alle native Funktionen sind, priorisieren Sie Lesbarkeit und Wartbarkeit über Mikrooptimierungen.

7. Zusammenfassung und empfohlene Best Practices

In diesem Artikel haben wir die JavaScript‑String‑Methoden substr, substring und slice untersucht, ihre grundlegende Syntax, Unterschiede, praktische Code‑Beispiele und Migrationsstrategien für veraltete Methoden behandelt. Dieser Abschnitt reorganisiert die wichtigsten Merkmale jeder Methode und präsentiert empfohlene moderne Best Practices.

7.1 Zusammenfassung jeder Methode

7.2 Praktische Auswahlkriterien

1. Verwenden Sie substring für einfache Bereichsextraktion:

• Am besten, wenn keine negativen Werte benötigt werden. Beispiel:

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. Verwenden Sie slice für maximale Flexibilität:

• Unterstützt negative Indizes und ist die bevorzugte Methode für neuen Code. Beispiel:

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. Ersetzen Sie substr so schnell wie möglich:

• Migrieren Sie zu slice oder substring, wenn Sie Legacy‑Code warten.

7.3 Moderne Best Practices

1. Schreiben Sie Code mit Fokus auf Lesbarkeit:

• Klarer und prägnanter Code verbessert die langfristige Wartbarkeit.

1. Vermeiden Sie veraltete Methoden:

• substr könnte in zukünftigen Updates die Browserunterstützung verlieren – migrieren Sie frühzeitig.

1. Verwenden Sie slice bei negativen Werten:

• slice ist die einzige Methode, die negative Indizes korrekt verarbeitet.

1. Verwenden Sie ESLint und Test‑Suites, um die Code‑Qualität zu erhalten:

• Statische Analyse hilft, veraltete Methoden zu erkennen und moderne Codierungsstile durchzusetzen.

7.4 Beispiel für einen modernen Codierungsstil

// Example: Extract domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Get file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 Aktionsplan für Leser

1. Überprüfen Sie Ihren bestehenden Code:

• Prüfen Sie, ob substr in Ihrem Projekt verwendet wird, und ersetzen Sie es bei Bedarf.

1. Befolgen Sie Best Practices im neuen Code:

• Verwenden Sie moderne, flexible Muster und vermeiden Sie veraltete Features.

1. Nutzen Sie Kommentare und Community‑Fragen:

• Teilen Sie Fragen oder Anwendungsfälle, um anderen zu helfen und Ihr Verständnis zu vertiefen.

Fazit

Dieser Artikel bot eine ausführliche Erklärung der JavaScript‑Methoden substr, substring und slice, einschließlich Syntax, Beispiele, Vergleichstabellen und Migrationsstrategien.

• Vermeiden Sie substr, da es veraltet ist.
• Verwenden Sie substring für einfache Szenarien.
• Verwenden Sie slice für maximale Flexibilität und moderne Best Practices.

Nutzen Sie diese Erkenntnisse, um effizienten, wartbaren JavaScript‑Code zu schreiben.

8. Verwandte Links und Referenzen

Um Ihr Verständnis von substr, substring und slice zu vertiefen, finden Sie hier hilfreiche Links und Referenzen. Offizielle Dokumentationen und Lernressourcen helfen Ihnen, mit den neuesten JavaScript‑Updates und -Techniken Schritt zu halten.

8.1 Offizielle Dokumentation

1. MDN Web Docs – JavaScript String‑Objekt

• Link: String – MDN Web Docs
• Übersicht: Eine vollständige Referenz für das JavaScript‑String‑Objekt mit detaillierten Spezifikationen und Beispielen.

1. ECMAScript‑Spezifikation (ECMA‑262)

• Link: ECMAScript Official Specification
• Übersicht: Die offizielle Sprachspezifikation, die die neuesten ECMAScript‑Funktionen, veraltete Methoden und technische Details abdeckt.

8.2 Lernseiten und Tutorials

1. JavaScript.info – Leitfaden zur Zeichenkettenmanipulation

• Link: JavaScript.info
• Übersicht: Umfassender Leitfaden, der sowohl grundlegende als auch fortgeschrittene Zeichenkettenoperationen mit praktischen Beispielen abdeckt.

1. Progate – JavaScript Kurs für Anfänger bis Fortgeschrittene

• Link: Progate
• Übersicht: Eine interaktive Plattform, ideal für Anfänger, die durch praktische Programmierübungen lernen.

1. DotInstall – Einführungskurse zu JavaScript

• Link: DotInstall
• Übersicht: Kurze Video‑Lektionen, die das visuelle und schnelle Erlernen von JavaScript erleichtern.

8.3 Praktische Beispiel‑Code‑Ressourcen

1. GitHub – JavaScript Beispielprojekte

• Link: GitHub
• Übersicht: Lernen Sie Best Practices und reale Muster, indem Sie Open‑Source‑Projekte erkunden.

1. CodePen – Interaktives Code‑Teilen

• Link: CodePen
• Übersicht: Teilen und testen Sie Ihren Code mit anderen Entwicklern oder stöbern Sie nach Beispielen zur Inspiration.

8.4 Empfohlene Bücher

1. JavaScript: The Definitive Guide (7th Edition)

• Übersicht: Ein umfassendes, autoritatives Nachschlagewerk, das JavaScript von den Grundlagen bis zu fortgeschrittenen Funktionen abdeckt.

1. Mastering Modern JavaScript – Revised Edition

• Übersicht: Ein praxisorientiertes Nachschlagewerk, das sich auf modernes JavaScript und aktuelle Codierungsstandards konzentriert.

8.5 Gemeinschaft und Foren

1. Stack Overflow (Japanese)

• Link: Stack Overflow
• Übersicht: Eine Q&A‑Community, in der Sie JavaScript‑Probleme effizient lösen können.

1. Qiita

• Link: Qiita
• Übersicht: Eine japanische Plattform, reich an praktischen Artikeln und JavaScript‑Fallstudien.

1. Teratail

• Link: Teratail
• Übersicht: Eine japanische Q&A‑Seite, ideal, um technische Fragen in der Muttersprache zu stellen.

Fazit

Dieser Abschnitt stellte eine Vielzahl von Ressourcen vor – von offiziellen Referenzen über Tutorials, Beispiel‑Code‑Repositories bis hin zu Community‑Plattformen – um das fortlaufende Lernen von JavaScript‑Zeichenkettenoperationen zu unterstützen.

Wichtige Erkenntnisse:

1. Überprüfen Sie die offizielle Dokumentation regelmäßig:

• Stellen Sie sicher, dass Ihr Codierstil mit den neuesten Standards übereinstimmt.

1. Stärken Sie Ihre Fähigkeiten durch praktisches Programmieren:

• Übung macht die Konzepte klarer und verbessert die Anwendung in der Praxis.

1. Beteiligen Sie sich an der Community:

• Das Teilen von Fragen und Lösungen vertieft das Verständnis und erweitert Ihr Netzwerk.