Typumwandlung
Sie trennen null und undefined. Als Nächstes: den Typ eines Werts absichtlich ändern — Zahl zu Text für Labels, Text zu Zahl für Rechnen. Das heißt Typumwandlung. Hier bleiben wir bei klaren Helfern: String(), Number() und Boolean() — plus einer häufigen +-Überraschung.
Was ist Typumwandlung in JavaScript?
Typumwandlung heißt: einen Wert von einer Art in eine andere bringen. Lieber explizit: String(42) ergibt "42", Number("7") ergibt 7, Boolean(0) ergibt false. Versteht Number den Text nicht, bekommen Sie NaN. Steht bei + ein String dabei, wird oft Text zusammengefügt statt addiert — einmal loggen, dann sitzt es.
Werkzeugkasten Umwandlung
📊 Typumwandlung für Einsteiger
| Helfer / Idee | Beispiel | Ergebnis / Hinweis |
|---|---|---|
String(...) |
String(42) |
"42" (Text) |
Number(...) |
Number("7") |
7 (Zahl) |
Boolean(...) |
Boolean(0) |
false (Falsy-Vorschau) |
| Unbrauchbarer Text | Number("hello") |
NaN — typeof bleibt "number" |
| Leer → Boolean | Boolean("") |
false |
+-Mix |
5 + "2" |
"52" (Konkatenation, nicht 7) |
String() — Text erzeugen
Brauchen Sie Label oder Meldung, wickeln Sie den Wert in String(...). Zahlen, Booleans, null und undefined werden zu Strings zum Anzeigen oder Verbinden.
console.log(String(42));
console.log(String(true));
console.log(String(null));
console.log(String(undefined));
console.log(typeof String(42));
Number() — Zahl erzeugen
Mit Number(...) wird Text rechenbereit. Ziffernstrings klappen sauber. Nicht-numerischer Text wird NaN.
console.log(Number("7"));
console.log(Number("3.5"));
console.log(Number(true));
console.log(Number(false));
console.log(typeof Number("7"));
Wenn Number scheitert — NaN
Number("hello") ist NaN. Aus der Zahlen-Lektion: typeof NaN ist trotzdem "number". Behandeln Sie NaN als fehlgeschlagene Umwandlung, nicht als brauchbare Menge.
console.log(Number("hello"));
console.log(typeof Number("hello"));
console.log(Number(""));
console.log(Number(null));
Number("") und Number(null) werden 0 — eine weitere Einsteigerfalle. Für echte Beträge klare Ziffernstrings verwenden.
Boolean() — Ja/Nein aus einem Wert
Boolean(...) macht true oder false. Leere Werte wie 0, "", null, undefined und NaN werden false. Nicht-leere Strings und die meisten Zahlen werden true. Die volle truthy/falsy-Liste kommt als Nächstes — hier reicht der Helfer.
console.log(Boolean(1));
console.log(Boolean(0));
console.log(Boolean("hi"));
console.log(Boolean(""));
console.log(Boolean(null));
Die +-Überraschung — Verketten statt Addieren
Ist eine Seite von + ein String, fügt JavaScript oft Text zusammen. Für Mathematik zuerst mit Number() umwandeln.
console.log(5 + 2);
console.log(5 + "2");
console.log(Number("5") + Number("2"));
console.log("Score: " + 10);
Umwandlungen auf der Seite zeigen
Wandeln Sie ein paar Werte um und schreiben Sie kurze Labels mit textContent.
<!DOCTYPE html>
<html>
<head>
<title>Type conversion — labels</title>
</head>
<body>
<p id="out">…</p>
<script>
let raw = "12";
let asNumber = Number(raw);
let asText = String(asNumber);
let flag = Boolean(asNumber);
document.getElementById("out").textContent =
"raw=" + raw +
" | number=" + asNumber +
" | text=" + asText +
" | flag=" + flag;
</script>
</body>
</html>
Der Absatz zeigt dieselbe Idee in drei Arten. Setzen Sie raw auf "0", aktualisieren Sie die Seite und sehen Sie: flag wird false, die Zahl bleibt 0.
Selbst ausprobieren
- Loggen Sie
String(99),String(false)undtypeof String(99). - Loggen Sie
Number("8")undNumber("8") + 2— rechnen, nicht"82". - Loggen Sie
Number("oops")undtypeofdavon (NaN, weiterhin"number"). - Loggen Sie
Boolean("")undBoolean("ok"). - Loggen Sie
3 + "4", dann neu mitNumber("3") + Number("4"). - Im HTML-Demo
rawauf"0"setzen, aktualisieren, neuesflaglesen.
Häufige Fehler
- Annehmen,
+addiert immer — ein String kann verketten NaNnachNumber("hello")ignorieren und weiterrechnen- Diese Lektion mit truthy/falsy verwechseln —
Boolean()ist nur Vorschau - Erwarten,
String(null)sei""— es ist der Text"null" typeofnach seltsamen Ergebnissen vergessen
Kurzfassung
- Typumwandlung: Art eines Werts absichtlich ändern
- Lieber
String(),Number(),Boolean()für klare Absicht - Unbrauchbarer Zahlentext →
NaN;typeof NaNbleibt"number" +mit String verkettet oft — vor dem Addieren umwandeln- Als Nächstes: truthy und falsy — welche Werte in Bedingungen wie true/false wirken
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt