Zum Inhalt springen
aviral gupta
Kontakt aufnehmen

// B2.3 · ca. 30 Min. · Einstieg

Strings und Template-Literale

Nach dieser Lektion schreiben Sie jeden Text als JavaScript-String, holen Zeichen und Teile heraus, bringen ihn mit String-Methoden in Form und bauen Meldungen mit Template-Literalen.

Lektion 3 von 5 in B2 Grammatik, Typen und Operatoren

Danach können Sie

  • Strings mit Anführungszeichen und Escapes schreiben und ihre Länge und Zeichen per Index lesen
  • slice, includes, startsWith, toUpperCase, trim und padStart nutzen und wissen, dass jede einen neuen String liefert
  • Text mit Template-Literalen bauen: Platzhalter mit ${} und Text über mehrere Zeilen

  1. Aufwärmen · Aufgabe 1 von 7

    Zum Aufwärmen: Welcher dieser Ausdrücke ist ein gültiger String mit dem Text It’s fine (mit geradem Apostroph)?

  2. Vorhersagen · Aufgabe 2 von 7

    Sagen Sie es vorher, bevor Sie weiterlesen: Was gibt dieser Code aus?

    const word = "hello";
word.toUpperCase();
console.log(word);

  3. Üben · Aufgabe 3 von 7

    Ergänzen Sie die Zahl, sodass das Programm Java ausgibt.

    console.log("JavaScript".slice(0, ____));
    console.log("JavaScript".slice(0, ));

  4. Üben · Aufgabe 4 von 7

    Ordnen Sie jedem Ausdruck zu, was console.log dafür ausgibt.

  5. Üben · Aufgabe 5 von 7

    Was gibt dieser Code aus?

    console.log("Banana".includes("ban"));

  6. Denksport · Aufgabe 6 von 7

    Knobelaufgabe. Was gibt dieser Code aus?

    console.log("Total: ${2 + 3}");

  7. Anwenden · Aufgabe 7 von 7

    Mini-Aufgabe. Eine Kasse liefert den Artikel " coffee " (mit überzähligen Leerzeichen), die Menge 2, den Preis 3.2 und die Bestellnummer 42. Geben Sie mit Template-Literalen COFFEE x2 aus, dann Total: 6.40 EUR, dann Order no. 00042.

    Prüfen Sie Ihr Ergebnis anhand dieser Liste

Selbst programmieren

Lesen Sie das ausgearbeitete Beispiel und lösen Sie dann die Übungen. Ihr Code läuft in Ihrem Browser oder auf Ihrem Computer und wird nie hochgeladen.

Ausgearbeitetes Beispiel

Eine Fahrkarte drucken

Ein Buchungsformular schickt einen Namen mit überzähligen Leerzeichen und in Kleinbuchstaben. Dieses Programm bringt ihn in Form, holt Zeichen und Teile heraus, prüft den Bahnhofsnamen und gibt mit einem einzigen Template-Literal eine dreizeilige Fahrkarte aus. Führen Sie es aus und ändern Sie dann den Sitzplatz auf 12 und den Namen auf Ihren eigenen.

main.js

// Formatting a train ticket from raw text.
const rawName = "  ada lovelace ";
const from = "Berlin Hbf";
const seat = 7;
const name = rawName.trim();
console.log("name:", name, "length:", name.length);
console.log("initial:", name[0].toUpperCase());
console.log("first name:", name.slice(0, 3));
console.log("from Berlin?", from.startsWith("Berlin"), "main station?", from.includes("Hbf"));
const ticket = `Passenger: ${name.toUpperCase()}
From: ${from}
Seat: ${String(seat).padStart(3, "0")}`;
console.log(ticket);
console.log('She said "bon voyage"\nand waved.');
console.log("rawName is unchanged:", rawName.length);

Ausführen mit

node main.js

Ausgabe

name: ada lovelace length: 12
initial: A
first name: ada
from Berlin? true main station? true
Passenger: ADA LOVELACE
From: Berlin Hbf
Seat: 007
She said "bon voyage"
and waved.
rawName is unchanged: 15
  • trim() liefert einen neuen String ohne die Leerzeichen an den Enden: 12 Zeichen statt 15.
  • name[0] ist das erste Zeichen; toUpperCase() macht daraus ein großes A.
  • slice(0, 3) nimmt die Indizes 0, 1 und 2: ada.
  • Das Template-Literal geht über drei Zeilen, also gibt ein console.log die ganze Fahrkarte aus.
  • In einfachen Anführungszeichen darf der Text doppelte enthalten, und \n beginnt eine neue Zeile.
  • rawName hat weiterhin seine 15 Zeichen: Keine Methode hat es verändert.
Ändern und ausführen

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Übungen

Übung 1 von 2

Einen Namen aufräumen

Ein Formular schickt den Namen " Grace Hopper " mit überzähligen Leerzeichen. Geben Sie drei Zeilen aus: Hello, Grace Hopper! (ohne die zusätzlichen Leerzeichen), Letters: 12 (die Länge des aufgeräumten Namens, Leerzeichen eingeschlossen) und Code: GRA (seine ersten drei Zeichen in Großbuchstaben). Berechnen Sie jeden Wert aus raw.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    raw.trim() liefert den Namen ohne die Leerzeichen an beiden Enden. Speichern Sie ihn: const name = raw.trim();

  2. Hinweis 2

    name.length zählt die Zeichen, auch das Leerzeichen in der Mitte.

  3. Hinweis 3

    name.slice(0, 3) liefert "Gra"; rufen Sie toUpperCase() auf diesem Ergebnis auf.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const raw = "   Grace Hopper  ";
const name = raw.trim();
console.log(`Hello, ${name}!`);
console.log("Letters:", name.length);
console.log("Code:", name.slice(0, 3).toUpperCase());
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const raw = "   Grace Hopper  ";
// Print three lines:
// Hello, Grace Hopper!
// Letters: 12
// Code: GRA
console.log("Hello, " + raw + "!");

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('begrüßt den aufgeräumten Namen', async () => {
  const got = await lines();
  assert.equal(got[0], 'Hello, Grace Hopper!', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "Hello, Grace Hopper!"`);
});

test('gibt die Länge des aufgeräumten Namens aus', async () => {
  const got = await lines();
  assert.equal(got[1], 'Letters: 12', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "Letters: 12"`);
});

test('gibt den Code in Großbuchstaben aus', async () => {
  const got = await lines();
  assert.equal(got[2], 'Code: GRA', `die dritte Zeile ist ${JSON.stringify(got[2])}, erwartet: "Code: GRA"`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Übung 2 von 2

Ein Paketetikett

Geben Sie ein dreizeiliges Paketetikett mit einem console.log und einem Template-Literal aus: Order #00042 (die Bestellnummer, mit Nullen auf fünf Ziffern aufgefüllt), To: HAMBURG (die Stadt in Großbuchstaben) und Items: 3. Verwenden Sie die drei Konstanten; der Starter gibt nur Order #42 aus.

Tab rückt ein, Umschalt+Tab rückt aus. Um den Editor mit der Tastatur zu verlassen, drücken Sie Esc und dann Tab.

Beim ersten Ausführen lädt Ihr Browser den JavaScript-Runner herunter (bis zu 0.1 MB) und speichert ihn im Cache. Ihr Code läuft in der eigenen Engine Ihres Browsers und bleibt auf Ihrem Gerät.

Hinweise
  1. Hinweis 1

    padStart ist eine String-Methode, machen Sie aus der Zahl also zuerst einen String: String(order).padStart(5, "0").

  2. Hinweis 2

    Drücken Sie innerhalb der Backticks Enter, wo eine neue Zeile beginnen soll; der Zeilenumbruch wird Teil des Textes.

  3. Hinweis 3

    Jeder Wert kommt in einen eigenen Platzhalter: ${city.toUpperCase()}.

Eine Lösung zeigen

Ein möglicher Lösungsweg. Ihrer kann anders aussehen und trotzdem alle Prüfungen bestehen.

const order = 42;
const city = "Hamburg";
const items = 3;
console.log(`Order #${String(order).padStart(5, "0")}
To: ${city.toUpperCase()}
Items: ${items}`);
Auf dem eigenen Computer ausführen

Installieren Sie ECMAScript 2026 oder neuer. Speichern Sie diese Dateien in einem Ordner, öffnen Sie dort ein Terminal und führen Sie die Befehle unten aus.

main.js

const order = 42;
const city = "Hamburg";
const items = 3;
// Print, with one template literal over three lines:
// Order #00042
// To: HAMBURG
// Items: 3
console.log("Order #" + order);

main.test.js

import {test} from 'node:test';
import assert from 'node:assert/strict';
import {runMain} from './learnrun.js';

const lines = async () => (await runMain()).trimEnd().split('\n');

test('füllt die Bestellnummer auf', async () => {
  const got = await lines();
  assert.equal(got[0], 'Order #00042', `die erste Zeile ist ${JSON.stringify(got[0])}, erwartet: "Order #00042"`);
});

test('gibt die Stadt in Großbuchstaben aus', async () => {
  const got = await lines();
  assert.equal(got[1], 'To: HAMBURG', `die zweite Zeile ist ${JSON.stringify(got[1])}, erwartet: "To: HAMBURG"`);
});

test('gibt die Anzahl der Artikel aus', async () => {
  const got = await lines();
  assert.equal(got[2], 'Items: 3', `die dritte Zeile ist ${JSON.stringify(got[2])}, erwartet: "Items: 3"`);
});

package.json

{
  "type": "module"
}

package.json sagt Node.js, dass die .js-Dateien Module sind; lassen Sie die Datei im Ordner.

Programm ausführen:

node main.js

Prüfungen ausführen (learnrun.js muss im selben Ordner liegen):

node --test
learnrun.js herunterladen

Häufige Fehler

Ein Zeichen eines Strings ändern

const word = "cat";
word[0] = "b";
console.log(word);

Was Node.js ausgibt

TypeError: Cannot assign to read only property '0' of string 'cat'

Warum, und die Lösung

Strings sind unveränderlich, ihren Zeichen lässt sich also nichts zuweisen. In einem Modul, und main.js ist hier eines, stoppt das das Programm; in älteren Skripten wird die Zeile stillschweigend ignoriert, was schlimmer ist. Bauen Sie stattdessen einen neuen String: const fixed = "b" + word.slice(1); ergibt "bat".

Dasselbe Anführungszeichen im String

console.log('It's fine');

Was Node.js ausgibt

SyntaxError: missing ) after argument list

Warum, und die Lösung

Der Apostroph in It's beendet den String in einfachen Anführungszeichen nach It, also liest JavaScript s fine' als Code und kann nichts damit anfangen. Nichts in der Datei läuft. Nehmen Sie doppelte Anführungszeichen, "It's fine", setzen Sie einen Backslash vor den Apostroph, 'It\'s fine', oder nehmen Sie Backticks.

Ein Methodenname in falscher Schreibung

const name = "ada";
console.log(name.toUppercase());

Was Node.js ausgibt

TypeError: name.toUppercase is not a function

Warum, und die Lösung

Methodennamen unterscheiden Groß- und Kleinschreibung, und die Methode heißt toUpperCase, mit großem C. name.toUppercase gibt es nicht, es ist also undefined, und undefined aufzurufen ist ein TypeError. Dieselbe Falle wartet bei toLowerCase und padStart: Jedes Wort nach dem ersten beginnt mit einem Großbuchstaben.

JavaScript im Browser: die eigene Engine Ihres Browsers in einem abgeschotteten Worker. Syntaxfehler findet acorn 8.18.0, MIT. Lizenz und Quellcode

Abschlussquiz

5 Fragen, ohne Hinweise. Ab 80 % ist die Lektion abgeschlossen.

Erledigen Sie zuerst alle Aufgaben oben, um das Abschlussquiz freizuschalten.

Problem melden

Etwas ist falsch oder unklar? Beschreiben Sie es kurz, dann wird es geprüft und korrigiert.

#

Mindestens 20 Zeichen.

Nur, wenn Sie eine Antwort wünschen.

Kernideen

Anführungszeichen, Escapes und Indizes

Ein String steht in doppelten oder einfachen Anführungszeichen; beide bedeuten dasselbe. Für dasselbe Zeichen im Text setzen Sie einen Backslash davor: "She said \"hi\"". Oder Sie nehmen die andere Sorte: "It's fine". Der Backslash leitet ein Escape ein: \n ist ein Zeilenumbruch und \\ ein einzelner Backslash. Die Länge eines Strings ist die Zahl seiner Zeichen: "Hello".length ist 5. Jedes Zeichen hat einen Index ab 0, also ist "Hello"[0] gleich "H", und das letzte steht bei length - 1. Ein Index hinter dem Ende liefert undefined, keinen Fehler.

Methoden liefern neue Strings

s.slice(0, 4) liefert die Zeichen von Index 0 bis ausschließlich Index 4; s.slice(-3) die letzten drei. s.includes("ab") und s.startsWith("ab") antworten mit true oder false und unterscheiden Groß- und Kleinschreibung. s.toUpperCase() und s.toLowerCase() ändern die Schreibung, s.trim() entfernt Leerzeichen an beiden Enden, und "7".padStart(3, "0") füllt auf "007" auf. Strings sind unveränderlich: Keine Methode ändert den String, auf dem sie aufgerufen wird. Jede liefert einen neuen, also ändert name.toUpperCase(); allein in einer Zeile nichts. Behalten Sie das Ergebnis: const loud = name.toUpperCase();.

Template-Literale: `${}` und mehrere Zeilen

Ein Template-Literal ist ein String in Backticks, `so wie hier`. Darin führt ${…} einen beliebigen Ausdruck aus und setzt sein Ergebnis in den Text: `Total: ${price * qty} EUR`. Das liest sich leichter als Teile, die mit + verbunden werden, und kein Leerzeichen geht vergessen. Der Platzhalter funktioniert nur in Backticks: "Total: ${price}" in normalen Anführungszeichen gibt Dollarzeichen und Klammern unverändert aus. Ein Template-Literal darf auch über mehrere Zeilen gehen, und jeder getippte Zeilenumbruch wird Teil des Strings, sodass ein einziges console.log ein ganzes Etikett ausgibt.

Quellen

Zuletzt geprüft am 30. September 2026