JavaScript - Strings: A Beginner's Guide

Hallo, zukünftige JavaScript-Zauberer! Heute tauchen wir in die magische Welt der Zeichenketten in JavaScript ein. Machen Sie sich keine Sorgen, wenn Sie noch nie eine Zeile Code geschrieben haben - bis zum Ende dieses Tutorials werden Sie wie ein Profi Code zusammenzimmern! Fangen wir an!

JavaScript - Strings

Was sind Zeichenketten?

In JavaScript sind Zeichenketten Abfolgen von Zeichen. Diese können Buchstaben, Zahlen, Symbole oder sogar Leerzeichen sein. Stellen Sie sich sie als Text Ihrer Programmierwelt vor.

Zum Beispiel:

let begruessung = "Hello, World!";
let zahl = "42";
let symbol = "@#$%";

Jede dieser ist eine Zeichenkette, sogar die Zahl! In JavaScript ist alles, was in Anführungszeichen steht, eine Zeichenkette.

Syntax

Das Erstellen einer Zeichenkette in JavaScript ist so einfach wie ein Kuchen. Sie können einfache (''), doppelte (""), oder sogar umgekehrte Anführungszeichen (``) verwenden. Sehen wir uns einige Beispiele an:

let einfacheAnfuhrungszeichen = 'Ich bin eine Zeichenkette';
let doppelteAnfuhrungszeichen = "Ich bin auch eine Zeichenkette";
let umgekehrteAnfuhrungszeichen = `Und ich bin auch eine Zeichenkette!`;

Profiltipp: Umgekehrte Anführungszeichen haben eine besondere Superkraft - sie erlauben es uns, Ausdrücke einzubetten. Darüber werden wir später sprechen!

JavaScript-Zeichenkettenobjekt-Eigenschaften

Zeichenketten in JavaScript verfügen über einige integrierte Eigenschaften. Es ist, als hätten sie ihre eigene Ausweis-Karte mit Informationen über sich selbst. Sehen wir uns die am häufigsten verwendete an:

length

Die length-Eigenschaft tells uns, wie viele Zeichen eine Zeichenkette hat.

let meinName = "Alice";
console.log(meinName.length); // Ausgabe: 5

Hier ist myName.length 5, weil "Alice" 5 Zeichen hat.

JavaScript-Zeichenkettenobjekt-Methoden

Nun schauen wir uns einige der coolen Tricks an, die Zeichenketten beherrschen können. Diese werden Methoden genannt und sind wie spezielle Fähigkeiten, die Zeichenketten haben.

Hier ist eine Tabelle einiger gängiger Zeichenkettenmethoden:

Methode	Beschreibung	Beispiel
toUpperCase()	Konvertiert die Zeichenkette in Großbuchstaben	"hello".toUpperCase() gibt "HELLO" zurück
toLowerCase()	Konvertiert die Zeichenkette in Kleinbuchstaben	"WORLD".toLowerCase() gibt "world" zurück
trim()	Entfernt Leerzeichen von beiden Enden	" hi ".trim() gibt "hi" zurück
charAt(index)	Gibt das Zeichen an der angegebenen Indexstelle zurück	"hello".charAt(1) gibt "e" zurück
indexOf(substring)	Gibt den Index des ersten Vorkommens des Substrings zurück	"hello".indexOf("l") gibt 2 zurück
slice(start, end)	Extrahiert einen Teil der Zeichenkette	"hello".slice(1, 4) gibt "ell" zurück
replace(old, new)	Ersetzt einen angegebenen Wert durch einen anderen Wert	"hello".replace("h", "j") gibt "jello" zurück

Lassen Sie uns mit einigen Beispielen einige dieser Methoden tiefergehend anschauen:

toUpperCase() und toLowerCase()

let schreien = "hello".toUpperCase();
console.log(schreien); // Ausgabe: HELLO

let fluestern = "QUIET PLEASE".toLowerCase();
console.log(fluestern); // Ausgabe: quiet please

Stellen Sie sich vor, Sie bauen eine Textnachrichten-App. Diese Methoden könnten nützlich sein, um eine CAPS LOCK-Funktion hinzuzufügen oder sicherzustellen, dass Benutzernamen immer in Kleinbuchstaben gespeichert werden.

trim()

let unordentlich = "   putzen   ";
let ordentlich = unordentlich.trim();
console.log(ordentlich); // Ausgabe: "putzen"

Dies ist besonders praktisch, wenn Sie mit Benutzereingaben arbeiten. Benutzer fügen oft versehentlich Leerzeichen am Anfang oder Ende ihres Textes ein.

charAt(index)

let wort = "JavaScript";
console.log(wort.charAt(4)); // Ausgabe: S

Denken Sie daran, in der Programmierung zählen wir ab 0, nicht 1. Daher ist das fünfte Zeichen an der Indexstelle 4!

indexOf(substring)

let sentence = "The quick brown fox jumps over the lazy dog";
console.log(sentence.indexOf("fox")); // Ausgabe: 16

Dies tells uns, dass "fox" an der 17. Zeichenstelle beginnt (denken Sie daran, wir zählen von 0).

slice(start, end)

let obst = "apple,banana,cherry";
let banane = obst.slice(6, 12);
console.log(banane); // Ausgabe: banana

Slice ist wie das Schneiden einer Teil von Ihrer Zeichenkette heraus. Hier schneiden wir "banana" aus unserer Obstzeichenkette heraus.

replace(old, new)

let alterSpruch = "The early bird catches the worm";
let neuerSpruch = alterSpruch.replace("worm", "success");
console.log(neuerSpruch); // Ausgabe: The early bird catches the success

Diese Methode ist großartig, um schnelle Änderungen an Ihren Zeichenketten vorzunehmen.

Beispiele

Lassen Sie uns all dies mit einem unterhaltsamen Beispiel zusammenfassen. Stellen wir uns vor, wir bauen einen einfachen Namensschildgenerator:

function createNameTag(name, role) {
let upperName = name.toUpperCase();
let trimmedRole = role.trim();
let tag = `Hallo, mein Name ist ${upperName} und ich bin ein ${trimmedRole}`;
return tag;
}

let meinTag = createNameTag("  alice  ", "  Entwicklerin   ");
console.log(meinTag); // Ausgabe: Hallo, mein Name ist ALICE und ich bin ein Entwicklerin

In diesem Beispiel verwenden wir toUpperCase() um den Namen hervorzuheben, trim() um versehentliche Leerzeichen zu entfernen und Template-Literals (die umgekehrten Anführungszeichen), um unsere Zeichenketten einfach zu kombinieren.

String HTML Wrapper

JavaScript bietet auch Methoden, um Zeichenketten in HTML-Tags einzubetten. Diese können nützlich sein, wenn Sie mit JavaScript HTML-Inhalte generieren. Hier sind einige davon:

let text = "Fett und Schön";
console.log(text.bold()); // Ausgabe: <b>Fett und Schön</b>
console.log(text.italics()); // Ausgabe: <i>Fett und Schön</i>
console.log(text.link("https://example.com")); // Ausgabe: <a href="https://example.com">Fett und Schön</a>

Es ist jedoch erwähnenswert, dass diese Methoden als veraltet angesehen werden. In moderner Webentwicklung ist es in der Regel besser, das DOM direkt zu manipulieren oder ein Framework zu verwenden.

Und das war's! Sie haben gerade Ihre ersten Schritte in die Welt der JavaScript-Zeichenketten gemacht. Denken Sie daran, Übung macht den Meister,also scheuen Sie sich nicht, mit diesen Methoden zu experimentieren. Bevor Sie es wissen, werden Sie mühelos komplexe Programme zusammenzimmern. Viel Spaß beim Programmieren!

Credits: Image by storyset