Erkunde die String-Objekt-Methoden in JavaScript

Einführung

In diesem Lab werden Sie essentielle Methoden des JavaScript-String-Objekts kennenlernen, um Text-Daten zu manipulieren und zu transformieren. Durch eine Reihe von praktischen Codierungsaufgaben lernen Sie, wie Sie Strings erstellen, ihre Länge überprüfen, den Fall umkehren, Zeichen extrahieren, Inhalte ersetzen und die Position von Zeichen im String finden, indem Sie die integrierten JavaScript-String-Methoden verwenden.

Das Lab behandelt grundlegende String-Manipulations-Techniken wie das Verwenden der length-Eigenschaft, um die Größe eines Strings zu bestimmen, toLowerCase() und toUpperCase() für die Fallumwandlung, charAt() und substring() für die Zeichenextraktion, die String-Ersetzung und -Spaltung sowie indexOf() für das Finden von bestimmten Zeichen innerhalb eines Strings. Indem Sie diese Schritte absolvieren, erhalten Sie praktische Erfahrungen mit den Kern-String-Operationen, die für die effektive Textverarbeitung in der JavaScript-Programmierung von entscheidender Bedeutung sind.

Erstelle einen String und überprüfe seine Länge

In diesem Schritt lernen Sie, wie Sie in JavaScript Strings erstellen und deren Länge mithilfe der length-Eigenschaft überprüfen. Strings sind grundlegende Datentypen in JavaScript, die zum Speichern und Verarbeiten von Text verwendet werden.

Öffnen Sie die WebIDE und erstellen Sie in das Verzeichnis ~/project eine neue Datei namens string-basics.js. Wir werden unseren JavaScript-Code schreiben, um die String-Erstellung und die Längesprüfung zu erkunden.

// Erstellen eines Strings mit verschiedenen Methoden
let greeting = "Hello, JavaScript!";
let name = "John Doe";
let emptyString = "";

// Überprüfen der Stringlänge mithilfe der length-Eigenschaft
console.log("Greeting length:", greeting.length);
console.log("Name length:", name.length);
console.log("Empty string length:", emptyString.length);

Wenn Sie diesen Code ausführen, sehen Sie die Länge jedes Strings in der Konsole ausgegeben. Die length-Eigenschaft gibt die Anzahl der Zeichen in einem String zurück.

Beispielausgabe:

Greeting length: 18
Name length: 8
Empty string length: 0

Einige wichtige Punkte, die Sie sich merken sollten:

• Strings können mit einfachen Anführungszeichen '' oder doppelten Anführungszeichen "" erstellt werden.
• Die length-Eigenschaft funktioniert für jeden String, einschließlich leerer Strings.
• Leerzeichen und Satzzeichen werden bei der Stringlänge berücksichtigt.

Wandle den String-Fall mit toLowerCase() und toUpperCase() um

In diesem Schritt lernen Sie, wie Sie den Fall von Strings mithilfe von zwei wichtigen JavaScript-String-Methoden umwandeln: toLowerCase() und toUpperCase(). Mit diesen Methoden können Sie den Fall von Strings leicht ändern.

Öffnen Sie die WebIDE und arbeiten Sie im zuvor erstellten ~/project/string-basics.js-File weiter. Fügen Sie den folgenden Code hinzu, um die Fallumwandlung zu erkunden:

// Ursprünglicher String
let originalText = "Hello, JavaScript Programming!";

// In Kleinbuchstaben umwandeln
let lowercaseText = originalText.toLowerCase();
console.log("Kleinbuchstaben:", lowercaseText);

// In Großbuchstaben umwandeln
let uppercaseText = originalText.toLowerCase().toUpperCase();
console.log("Großbuchstaben:", uppercaseText);

// Praktisches Beispiel: Benutzernamenormalisierung
let username = "JohnDoe";
let normalizedUsername = username.toLowerCase();
console.log("Normalisierter Benutzername:", normalizedUsername);

Wenn Sie diesen Code ausführen, sehen Sie die folgende Ausgabe:

Beispielausgabe:

Kleinbuchstaben: hello, javascript programming!
Großbuchstaben: HELLO, JAVASCRIPT PROGRAMMING!
Normalisierter Benutzername: johndoe

Wichtige Punkte zu den Fallumwandlungsmethoden:

• toLowerCase() wandelt alle Zeichen in einem String in Kleinbuchstaben um
• toUpperCase() wandelt alle Zeichen in einem String in Großbuchstaben um
• Diese Methoden sind nützlich für die Stringvergleichung, -normalisierung und -formatierung
• Der ursprüngliche String bleibt unverändert; diese Methoden geben einen neuen String zurück

Extrahiere Zeichen und Teilstrings mit charAt() und substring()

In diesem Schritt lernen Sie, wie Sie Einzelzeichen und Teilstrings aus einem String mithilfe der charAt()- und substring()-Methoden in JavaScript extrahieren.

Öffnen Sie die WebIDE und arbeiten Sie im ~/project/string-basics.js-File weiter. Fügen Sie den folgenden Code hinzu, um die Zeichen- und Teilstringextraktion zu erkunden:

// Ursprünglicher String
let message = "JavaScript is awesome!";

// Einzelzeichen extrahieren mit charAt()
let firstChar = message.charAt(0);
let fifthChar = message.charAt(4);
console.log("Erstes Zeichen:", firstChar);
console.log("Fünftes Zeichen:", fifthChar);

// Teilstrings extrahieren mit substring()
let partialString1 = message.substring(0, 10);
let partialString2 = message.substring(11);
console.log("Erste 10 Zeichen:", partialString1);
console.log("Ab dem 11. Zeichen:", partialString2);

// Praktisches Beispiel: Benutzernamen aus E-Mail extrahieren
let email = "john.doe@example.com";
let username = email.substring(0, email.indexOf("@"));
console.log("Benutzername:", username);

Wenn Sie diesen Code ausführen, sehen Sie die folgende Ausgabe:

Beispielausgabe:

Erstes Zeichen: J
Fünftes Zeichen: S
Erste 10 Zeichen: JavaScript
Ab dem 11. Zeichen: is awesome!
Benutzername: john.doe

Wichtige Punkte zur Zeichen- und Teilstringextraktion:

• charAt(index) gibt das Zeichen an einer bestimmten Position (null-basiert) zurück
• substring(startIndex, endIndex) extrahiert einen Teil des Strings
• Wenn kein Endindex angegeben wird, extrahiert substring() bis zum Ende des Strings
• Indizes beginnen bei 0, sodass das erste Zeichen an Index 0 steht

Ersetze und spalte String-Inhalte

In diesem Schritt lernen Sie, wie Sie Strings in JavaScript mithilfe der replace()- und split()-Methoden manipulieren. Diese Methoden sind leistungsstarke Werkzeuge zum Ändern und Zerteilen von Stringinhalten.

Öffnen Sie die WebIDE und arbeiten Sie im ~/project/string-basics.js-File weiter. Fügen Sie den folgenden Code hinzu, um die Stringersetzung und -spaltung zu erkunden:

// Ursprünglicher String
let sentence = "Hello, world! Welcome to JavaScript programming.";

// Replace-Methode: bestimmte Wörter oder Zeichen ersetzen
let replacedSentence = sentence.replace("world", "JavaScript");
console.log("Ersetzter Satz:", replacedSentence);

// Globale Ersetzung mit regulärer Ausdruck
let cleanedSentence = sentence.replace(/[!.]/g, "");
console.log("Gereinigter Satz:", cleanedSentence);

// Split-Methode: String in ein Array umwandeln
let words = sentence.split(" ");
console.log("Wörter-Array:", words);

// Split mit Limit
let limitedWords = sentence.split(" ", 3);
console.log("Beschränkte Wörter:", limitedWords);

// Praktisches Beispiel: Parsen von CSV-ähnlichen Daten
let userData = "John,Doe,30,Developer";
let userDetails = userData.split(",");
console.log("Vorname des Benutzers:", userDetails[0]);
console.log("Nachname des Benutzers:", userDetails[1]);

Wenn Sie diesen Code ausführen, sehen Sie die folgende Ausgabe:

Beispielausgabe:

Ersetzter Satz: Hello, JavaScript! Welcome to JavaScript programming.
Gereinigter Satz: Hello, world Welcome to JavaScript programming
Wörter-Array: [ 'Hello,', 'world!', 'Welcome', 'to', 'JavaScript', 'programming.' ]
Beschränkte Wörter: [ 'Hello,', 'world!', 'Welcome' ]
Vorname des Benutzers: John
Nachname des Benutzers: Doe

Wichtige Punkte zu replace() und split():

• replace() ersetzt einen Teil eines Strings mit einem anderen String
• Verwenden Sie reguläre Ausdrücke mit replace() für globale Ersetzungen
• split() teilt einen String in ein Array auf, basierend auf einem Separator
• split() kann einen optionalen Limit-Parameter enthalten, um die Anzahl der Aufteilungen zu steuern

Finde die Positionen von Zeichen mit indexOf()

In diesem Schritt lernen Sie, wie Sie die Position von Zeichen oder Teilstrings innerhalb eines Strings mithilfe der indexOf()-Methode in JavaScript finden. Diese Methode ist entscheidend für das Suchen und Lokalisieren von spezifischem Inhalt innerhalb von Strings.

Öffnen Sie die WebIDE und arbeiten Sie im ~/project/string-basics.js-File weiter. Fügen Sie den folgenden Code hinzu, um die Zeichen- und Teilstringpositionierung zu erkunden:

// Ursprünglicher String
let message = "Hello, JavaScript is awesome!";

// Die Position eines Zeichens finden
let commaPosition = message.indexOf(",");
let firstJPosition = message.indexOf("J");
console.log("Position des Kommas:", commaPosition);
console.log("Erste Position von 'J':", firstJPosition);

// Die Position eines Teilstrings finden
let javascriptPosition = message.indexOf("JavaScript");
console.log("Position von 'JavaScript':", javascriptPosition);

// Ein Zeichen ab einer bestimmten Position suchen
let secondJPosition = message.indexOf("J", commaPosition + 1);
console.log("Zweite Position von 'J':", secondJPosition);

// Das Finden von Zeichen, die nicht gefunden werden
let xPosition = message.indexOf("X");
console.log("Position von 'X':", xPosition);

// Praktisches Beispiel: E-Mail-Validierung
let email = "user@example.com";
let atSymbolPosition = email.indexOf("@");
let domainName = email.substring(atSymbolPosition + 1);
console.log("Domainname:", domainName);

Wenn Sie diesen Code ausführen, sehen Sie die folgende Ausgabe:

Beispielausgabe:

Position des Kommas: 5
Erste Position von 'J': 7
Position von 'JavaScript': 7
Zweite Position von 'J': 7
Position von 'X': -1
Domainname: example.com

Wichtige Punkte zu indexOf():

• Gibt den ersten Index zurück, an dem das angegebene Zeichen oder der Teilstring gefunden wird
• Wenn das Zeichen/der Teilstring nicht gefunden wird, gibt es -1 zurück
• Kann ab einer bestimmten Position suchen, indem ein optionaler zweiter Parameter verwendet wird
• Nützlich zum Suchen, Validieren und Extrahieren von Teilen von Strings

Zusammenfassung

In diesem Lab haben die Teilnehmer grundlegende String-Manipulations-Techniken in JavaScript untersucht, wobei sie sich auf Schlüssel-Methoden und -Eigenschaften konzentrierten. Das Lab hat die Lernenden dabei unterstützt, Strings zu erstellen, ihre Länge zu überprüfen und Fallumwandlungen mit Methoden wie length, toLowerCase() und toUpperCase() durchzuführen. Die Teilnehmer haben gelernt, wie man Strings mit unterschiedlicher Syntax erstellt, die Länge von Strings misst und die Textfälle dynamisch umwandelt.

Die praktischen Übungen haben wesentliche String-Operationen gezeigt, darunter die Extraktion von Zeichen, die Manipulation von Teilstrings und das Verständnis der String-Indexierung. Indem sie an praktischen Codebeispielen arbeiten, haben die Studierenden praktische Einblicke in die String-Objekt-Methoden von JavaScript gewonnen, was es ihnen ermöglicht, Text-Daten in ihren Programmierprojekten effektiv zu verarbeiten und zu modifizieren.