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

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

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

1. Einführung

JavaScript ist eine unverzichtbare Programmiersprache in der modernen Webentwicklung. Insbesondere wird die Zeichenkettenmanipulation häufig für Datenformatierung, Parsing und dynamische UI-Aktualisierungen verwendet.

Dieser Artikel bietet eine ausführliche Erklärung von drei häufig verwendeten JavaScript‑String‑Methoden – substr, substring und slice. Da diese Methoden ähnliche Funktionalität besitzen, hilft das Verständnis ihrer Unterschiede dabei, die jeweils passendste Methode für jede Situation zu wählen.

Wir werden außerdem erläutern, warum substr veraltet ist, empfohlene Alternativen vorstellen und praktische Ratschläge geben, um Ihren Code an moderne JavaScript‑Best‑Practices anzupassen.

2. Grundlegender Überblick und Verwendung jeder Methode

Dieser Abschnitt erklärt die grundlegende Syntax und Verwendung von substr, substring und slice im Detail. Durch das Verständnis jeder Methode können Sie die passende auswählen und sowohl die Lesbarkeit als auch die Wartbarkeit des Codes verbessern.

2.1 substr‑Methode

Syntax:

string.substr(start, length)

Beschreibung:

• start : Gibt die Startposition (Index) für die Extraktion an. Die Indizierung beginnt bei 0.
• length : Gibt die Anzahl der zu extrahierenden Zeichen an. Wird sie weggelassen, werden Zeichen von der Startposition bis zum Ende der Zeichenkette extrahiert.

Beispiel:

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

Wichtige Hinweise:
Die substr‑Methode ist veraltet und ihre Verwendung wird in der modernen JavaScript‑Entwicklung nicht empfohlen. Verwenden Sie stattdessen slice oder substring als Alternativen.

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 : Gibt die Startposition für die Extraktion an.
• end : Gibt die Endposition an (das Zeichen an diesem Index ist nicht enthalten).

Beispiel:

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

Wichtige Punkte:

1. Die Reihenfolge der Argumente wird automatisch angepasst: Wenn substring(10, 4) angegeben wird, wird es automatisch als substring(4, 10) interpretiert.
2. Negative Werte werden ignoriert: Wird ein negativer Wert übergeben, wird er als 0 behandelt.

Alternative, 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 : Gibt die Startposition für die Extraktion an.
• end : Gibt die Endposition an (das Zeichen an diesem Index ist nicht enthalten).

Beispiel:

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

Wichtige Punkte:

1. Unterstützt negative Werte: Negative Werte werden als Versatz vom Ende der Zeichenkette interpretiert.
2. Anwendbar sowohl auf Zeichenketten als auch auf Arrays: Da slice auch mit Arrays verwendet werden kann, ist es eine äußerst vielseitige Methode.

3. Vergleichstabelle jeder Methode

Wie man nach Anwendungsfall wählt:

• Kurzabschnitt einer Zeichenkette extrahieren: → slice
• Wenn negative Indizes benötigt werden: → slice
• Kompatibilität mit Legacy‑Code: → Vermeiden Sie substr und migrieren Sie zu modernen Alternativen

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"

Extrahieren eines Wertes aus einem bestimmten Muster

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

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

5. Umgang mit veralteten Methoden

In JavaScript wird die Methode substr als veraltet angesehen. Dies liegt daran, dass sie in den neuesten ECMAScript‑Spezifikationen offiziell als nicht empfohlener Ansatz klassifiziert wurde. Dieser Abschnitt erklärt die Probleme mit substr, verfügbare Alternativen und praktische Migrationsstrategien.

5.1 Warum ist substr veraltet?

1. Geringe Lesbarkeit:

• Die Methode substr gibt im zweiten Argument die Anzahl der zu extrahierenden Zeichen an, was von anderen Methoden, die Start‑ und Endposition verwenden, abweicht. Diese Inkonsistenz erschwert das sofortige Verstehen des Codes.

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

• Im Rahmen des ECMAScript‑Standardisierungsprozesses können ältere Features als veraltet markiert werden. Daher sollte substr in neuem Code vermieden werden, um langfristige Kompatibilität zu gewährleisten.

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

• Während substr keine negativen Werte unterstützt, unterstützt slice negative Indizes vollständig, was eine flexiblere Zeichenkettenextraktion ermöglicht.

5.2 Wie man zu alternativen Methoden migriert

Fall 1: Extrahieren eines Substrings fester Länge

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

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

Fall 2: Extrahieren des Endes einer Zeichenkette

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

// Recommended code (slice)
console.log(str.slice(-6)); // Output: "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); // Output: "index.html"

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

5.3 Refactoring‑Tipps für Legacy‑Code

1. Code‑Scan durchführen:

• Verwenden Sie Werkzeuge wie ESLint, um Vorkommen von substr in Ihrem Code‑Base zu erkennen.

2. Testabdeckung verbessern:

• Nutzen Sie Unit‑Tests, um das Verhalten nach dem Refactoring zu verifizieren und sicherzustellen, dass Änderungen keine Regressionen einführen.

3. Schrittweise migrieren:

• Priorisieren Sie kritische Bereiche Ihres Code‑Bases und ersetzen Sie veraltete Methoden Schritt für Schritt.

5.4 Vorteile der Migration weg von substr

1. Verbesserte Lesbarkeit und Wartbarkeit:

• Die Absicht des Codes wird klarer, was Zusammenarbeit und langfristige Wartung erleichtert.

2. Ausrichtung an moderne Spezifikationen:

• Die Konformität mit dem ECMAScript‑Standard sorgt für reibungslosere zukünftige Updates und Kompatibilität.

3. Flexible Handhabung negativer Werte:

• Durch die Verwendung von slice lässt sich sowohl vom Anfang als auch vom Ende einer Zeichenkette einfach extrahieren, was zu saubererem und prägnanterem Code führt.

6. Häufig gestellte Fragen (FAQ)

Dieser Abschnitt fasst gängige Fragen und Antworten zu JavaScript‑String‑Manipulationsmethoden zusammen und hilft Lesern, typische Zweifel schnell zu klären.

Q1: Ist substr noch nutzbar?

A:
Ja, substr funktioniert in den meisten modernen Browsern weiterhin. Da es jedoch in der ECMAScript‑Spezifikation als veraltet gilt, sollte es in neuen Projekten oder bei langfristiger Kompatibilität vermieden werden.

Empfohlene Alternative:

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

Q2: Was ist der Unterschied zwischen slice und substring?

A:
Die nachstehende Tabelle fasst die wichtigsten Unterschiede zwischen slice und substring 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 Verwendung veralteter Methoden?

A:
Die weitere Verwendung veralteter Methoden kann zu den folgenden Risiken führen.

1. Ende der Browserunterstützung: In Zukunft könnte substr von Browsern nicht mehr unterstützt werden.
2. Erhöhte Wartungskosten: Das Beheben von Bugs oder Warnungen, die durch veraltete Methoden verursacht werden, kann unnötigen Aufwand erzeugen.
3. Verminderte Codequalität: Das Nicht‑Einhalten moderner Spezifikationen reduziert die Lesbarkeit und Wartbarkeit.

Q4: Welche Methode ist am besten für den Umgang mit langen Zeichenketten?

A:
Bei langen Zeichenketten ist slice die beste Wahl, da es flexibel ist und negative Indizes unterstützt.

Beispiel:

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

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

// Get the last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: Wie kann ich von hinten mit negativen Werten zählen?

A:
Während slice negative Werte unterstützt, behandelt substring negative Werte als 0, daher ist Vorsicht geboten.

Beispiel:

let str = "JavaScript";

// Extract from the end using slice
console.log(str.slice(-6));  // "Script"

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

Q6: Gibt es Leistungsunterschiede?

A:
In modernen Browsern gibt es keine signifikanten Leistungsunterschiede zwischen slice, substring und substr. Da alle als native Funktionen implementiert sind, wird empfohlen, Lesbarkeit und Wartbarkeit über die Performance zu stellen.

7. Zusammenfassung und empfohlene Best Practices

Dieser Artikel erklärte die JavaScript‑Methoden zur Zeichenkettenmanipulation — substr, substring und slice — von der Grundanwendung über die wichtigsten Unterschiede, praktische Beispiele bis hin zu Strategien im Umgang mit veralteten Methoden.

Dieser Abschnitt fasst jede Methode zusammen und hebt empfohlene Best Practices basierend auf modernen JavaScript‑Standards hervor.

7.1 Zusammenfassung jeder Methode

7.2 Praktische Kriterien zur Auswahl der richtigen Methode

1. Verwenden Sie substring für einfache Bereichsextraktion:

• Empfohlen bei kurzen Zeichenketten und wenn keine negativen Werte benötigt werden. Beispiel:

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

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

• Da es negative Indizes unterstützt und größere Vielseitigkeit bietet, ist slice die am meisten empfohlene Option für modernen Code. Beispiel:

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

3. Ersetzen Sie substr so früh wie möglich:

• In Legacy‑Codebasen sollte substr proaktiv durch slice oder substring ersetzt werden.

7.3 Moderne Best Practices

1. Lesbarkeit priorisieren:

• Klaren und prägnanten Code zu schreiben verbessert die langfristige Wartbarkeit.

2. Veraltete Methoden eliminieren:

• Da substr in zukünftigen Updates entfernt werden könnte, sollte aktiv zu slice oder substring migriert werden.

3. Verwenden Sie slice, wenn negative Werte benötigt werden:

• slice ermöglicht flexible rückwärts Extraktion und ist damit ideal für viele Anwendungsfälle.

7.4 Beispiele für Coding‑Stil

Abschließend finden Sie einige Beispiele für moderne Zeichenkettenmanipulation, geschrieben in einem sauberen und wartbaren Stil.

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

// Example: Extracting a 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. Führen Sie einen Code‑Review durch:

• Prüfen Sie bestehende Projekte auf die Verwendung von substr und ersetzen Sie sie dort, wo es sinnvoll ist, durch slice oder substring.

2. Wenden Sie Best Practices im neuen Code an:

• Folgen Sie modernen Spezifikationen und entwerfen Sie Code mit Fokus auf Lesbarkeit und Handhabung negativer Indizes.

3. Nutzen Sie Kommentare und Fragen:

• Ermutigen Sie Fragen und Diskussionen zu unklaren Punkten oder spezifischen Anwendungsfällen, um Wissen innerhalb der Community zu teilen.

Fazit

Dieser Artikel erklärte die JavaScript‑String‑Methoden substr, substring und slice anhand grundlegender Syntax, Anwendungsbeispiele und Vergleichstabellen.

• substr sollte vermieden werden, da es veraltet ist.
• substring ist für einfache Anwendungsfälle geeignet.
• slice ist die flexibelste und empfohlene Methode.

Nutzen Sie dieses Wissen, um effizienten, lesbaren und wartbaren JavaScript‑Code zu schreiben.

8. Verwandte Links und Referenzen

Um Ihr Verständnis von substr, substring und slice weiter zu vertiefen, bietet dieser Abschnitt nützliche Links und Referenzmaterialien. Offizielle Dokumentation und Lernressourcen helfen Ihnen, auf dem neuesten Stand der Spezifikationen und fortgeschrittener Techniken zu bleiben.

8.1 Offizielle Dokumentation

1. MDN Web Docs – JavaScript String‑Objekt

• Link: String – MDN Web Docs
• Description: Offizielle Referenzdokumentation für das JavaScript‑String‑Objekt, einschließlich detaillierter Spezifikationen und Beispiele für jede Methode.

2. ECMAScript‑Spezifikation (ECMA‑262)

• Link: ECMAScript Official Specification
• Description: Die offizielle ECMAScript‑Spezifikation, die JavaScript‑Sprachfeatures detailliert, einschließlich veralteter Methoden und aktueller Updates.

8.2 Lernseiten und Tutorials

1. JavaScript.info – String‑Methoden

• Link: JavaScript.info
• Description: Umfassende Erklärungen zur String‑Manipulation, von den Grundlagen bis zu fortgeschrittenen Anwendungsfällen, mit praktischen Beispielen.

2. Progate – JavaScript Lernkurse

• Link: Progate
• Description: Eine interaktive Lernplattform für Anfänger, die JavaScript‑Grundlagen durch praktisches Codieren vermittelt.

3. Dotinstall – JavaScript‑Anfängerkurs

• Link: Dotinstall
• Description: Eine videobasierte Lernplattform, die ein schnelles und visuelles Verständnis von JavaScript‑Konzepten ermöglicht.

8.3 Praktische Beispielcode‑Ressourcen

1. GitHub – JavaScript‑Beispielprojekte

• Link: GitHub
• Description: Lernen Sie reale JavaScript‑Muster und Best Practices durch Open‑Source‑Projekte.

2. CodePen – Interaktive Code‑Spielwiese

• Link: CodePen
• Description: Eine Plattform zum Teilen und Experimentieren mit JavaScript‑Code in Echtzeit.

8.4 Empfohlene Bücher

1. JavaScript: The Definitive Guide, 7th Edition (O’Reilly)

• Overview: Überblick: Ein umfassendes Nachschlagewerk, das JavaScript‑Grundlagen bis zu den neuesten Sprachfeatures abdeckt.

2. Modern JavaScript Development Guide (Revised Edition)

• Overview: Überblick: Ein praxisorientierter Leitfaden, der sich auf moderne JavaScript‑Syntax und realweltliche Entwicklungstechniken konzentriert.

8.5 Communities und Foren

1. Stack Overflow

• Link: Stack Overflow
• Description: Eine globale Q&A‑Community für programmierbezogene Fragen und Fehlersuche.

2. Qiita

• Link: Qiita
• Description: Eine japanische Plattform für technische Artikel mit vielen praktischen JavaScript‑Beispielen.

3. Teratail

• Link: Teratail
• Description: Eine japanische Q&A‑Seite, auf der Entwickler Fragen auf Japanisch stellen können.

Zusammenfassung

Dieser Abschnitt stellte offizielle Referenzen, Lernressourcen, Beispielcode‑Repositories und Entwickler‑Communities im Zusammenhang mit der JavaScript‑String‑Manipulation vor.

Wichtige Erkenntnisse:

1. Spezifikationen anhand offizieller Dokumentation überprüfen:

• Machen Sie es sich zur Gewohnheit, die neuesten Spezifikationen und Nutzungshinweise zu prüfen.

2. Stärken Sie praktische Fähigkeiten durch Tutorials und Beispielcode:

• Praktisches Programmieren festigt sowohl das theoretische Verständnis als auch die Anwendung in der realen Welt.

3. Wissen durch Entwickler‑Communities teilen:

• Die Teilnahme an Diskussionen erweitert Ihr Fachwissen und Ihr berufliches Netzwerk.