JavaScript-Typkonvertierungen

JavaScript ist eine dynamisch typisierte Sprache: Eine Variable kann in einem Moment einen string enthalten und im nächsten eine Zahl, ohne dass du den Typ eines Wertes vorab deklarieren musst. Wegen dieser Flexibilität müssen Werte ständig zwischen Typen wechseln — eine Zahl wird zu Text zum Anzeigen, der Text eines Formularfelds wird zu einer Zahl für eine Berechnung, ein object wird auf „Wahrheitswert" innerhalb eines if geprüft. Diese Konvertierungen geschehen auf zwei Arten: explizit, wenn du selbst eine Funktion wie String() oder Number() aufrufst, und implizit (auch als Koercion bezeichnet), wenn die Sprache einen Wert automatisch umwandelt, um die Operation zu ermöglichen. Dieses Kapitel behandelt beide Varianten, die genauen Regeln für jeden Zieltyp und die Überraschungen, über die fast alle irgendwann stolpern.

Falls du noch nichts über die verfügbaren Datentypen gelesen hast, empfiehlt es sich, das zuerst zu überfliegen — Konvertierungen ergeben nur Sinn, wenn du weißt, zwischen was du konvertierst.

Die drei Konvertierungen

Fast jede Konvertierung in JavaScript zielt auf einen von drei primitiven Typen ab: string, number oder boolean. Es gibt keine allgemeine „Konvertierung in Typ X"-Operation; stattdessen hat jedes Ziel seine eigenen Regeln. Wir schauen uns jedes nacheinander an und sehen dann, wann die Sprache sie für dich anwendet.

String-Konvertierung

Die String-Konvertierung wandelt einen Wert in seine Textform um. Sie geschieht explizit mit der Funktion String() und implizit, wenn ein Wert auf einen string trifft (Konkatenation) oder in ein Template-Literal interpoliert wird.

String(123);        // "123"
String(true);       // "true"
String(null);       // "null"
String(undefined);  // "undefined"
`Value: ${42}`;     // "Value: 42"

Die Regeln sind für Primitive intuitiv — der Wert wird genau so dargestellt, wie man ihn lesen würde. Beachte, dass null und undefined zum wörtlichen Text "null" bzw. "undefined" werden und nicht zu einem leeren string.

Objekte und arrays sind interessanter. Ein array wird zu seinen Elementen, durch Kommas verbunden, und ein einfaches object wird zu dem bekannt unbrauchbaren "[object Object]":

Ein leeres array wird also zu einem leeren string, und null/undefined innerhalb eines arrays werden als leere Slots dargestellt (daher ergibt [null, 5] ",5"). Das Ergebnis "[object Object]" für Objekte ist der Grund, warum du auf JSON.stringify(obj) zurückgreifst, wenn du den Inhalt eines object tatsächlich lesen möchtest.

Numerische Konvertierung

Die numerische Konvertierung wandelt einen Wert in eine Zahl um. Die explizite Form ist die Funktion Number(); implizit geschieht sie mit dem unären Plus-Operator (+value) und bei den meisten arithmetischen und Vergleichs-Operatoren.

Die Regeln sind es wert, auswendig gelernt zu werden, da sie nicht immer offensichtlich sind:

Einige dieser Ergebnisse sind berüchtigt. Number(null) ist 0, aber Number(undefined) ist NaN — die beiden „leeren" Werte verhalten sich unterschiedlich. Ein leerer string wird ebenfalls zu 0 und nicht zu NaN. Strings werden zunächst von umgebendem Leerzeichen bereinigt und dann strikt geparst; bleibt irgendetwas Nicht-Numerisches übrig, ist das Ergebnis NaN (was für „Not a Number" steht).

Unäres Plus

Der unäre Plus-Operator ist die kürzeste Methode, eine numerische Konvertierung zu erzwingen. Vor einen Wert gestellt, tut +value genau das, was Number(value) tut:

+"42";       // 42
+"";         // 0
+true;       // 1
+"abc";      // NaN

Das ist praktisch, aber leicht zu verlesen — verwende es also an Stellen, an denen die Absicht klar ist (wie +event.target.value beim Lesen eines numerischen Formularfelds).

parseInt und parseFloat vs. Number

Number() ist strikt: Der gesamte string muss eine gültige Zahl sein, sonst erhältst du NaN. Die Funktionen parseInt() und parseFloat() sind toleranter — sie lesen ab dem Anfang des Strings und hören beim ersten nicht passenden Zeichen auf, und geben zurück, was sie bis dahin geparst haben.

Zwei Hinweise zu parseInt:

• Es gibt NaN nur zurück, wenn der string nicht mit einer parsbaren Zahl beginnt — "px12" schlägt fehl, aber "12px" liefert erfolgreich 12.
• Übergib immer den Radix (die Basis) als zweites Argument, um Überraschungen zu vermeiden: parseInt("08", 10) liefert zuverlässig 8. Ohne ihn verwenden moderne Engines standardmäßig Basis 10, aber die explizite Angabe beseitigt jeden Zweifel und dokumentiert deine Absicht.

parseInt("FF", 16);  // 255  (hexadecimal)
parseInt("101", 2);  // 5    (binary)
parseInt("08", 10);  // 8    (decimal, explicit radix)

Verwende Number() (oder +), wenn du prüfen möchtest, ob ein ganzer Wert numerisch ist, und parseInt/parseFloat, wenn du bewusst eine Zahl vom Anfang eines längeren Strings extrahieren möchtest, z. B. "24px" aus CSS.

Boolean-Konvertierung

Die Boolean-Konvertierung beantwortet eine einzige Frage: Ist dieser Wert „truthy" (wahr) oder „falsy" (falsch)? Sie geschieht explizit mit Boolean() und implizit überall, wo eine Bedingung ausgewertet wird — in if, while, dem ternären ? und logischen Operatoren.

Die Regel ist erfrischend einfach, weil die Liste der falsy-Werte kurz und fest ist. Diese acht Werte konvertieren zu false:

false
0
-0
0n        // BigInt zero
""        // empty string
null
undefined
NaN

Alles andere ist truthy. Dieses „alles andere" umfasst einige Werte, die Einsteiger überraschen:

Der string "0" ist truthy, weil er ein nicht-leerer string ist — sein Inhalt spielt keine Rolle. Ebenso ist "false" ein völlig normaler nicht-leerer string und wird zu true konvertiert. Und ein leeres array [] oder leeres object {} ist truthy, obwohl es sich „leer" anfühlt. Lerne die falsy-Liste auswendig; wenn ein Wert nicht darauf steht, ist er truthy.

Implizite Koercion

Bisher haben wir die Konvertierungsfunktionen selbst aufgerufen. Die meisten realen Konvertierungen sind jedoch implizit — die Sprache wandelt Werte um, damit eine Operation funktioniert. Der Trick besteht darin zu wissen, welchen Zieltyp jeder Kontext erwartet.

Arithmetik und die +-Besonderheit

Jeder arithmetische Operator wandelt seine Operanden in Zahlen um — außer +, der überladen ist. Wenn einer der Operanden von + ein string ist, wird + zur String-Konkatenation; andernfalls addiert er Zahlen. Jeder andere Operator (-, *, /, %) konvertiert immer in Zahlen.

Die Zeile 1 + 2 + '3' zeigt, warum die Reihenfolge wichtig ist: + ist linksassoziativ, daher wird zunächst 1 + 2 als Zahlenaddition ausgeführt (3), dann trifft 3 + '3' auf einen string und wird zu "33" konkateniert. Diese eine Regel — „+ mit einem string konkateniert, alles andere konvertiert in eine Zahl" — erklärt einen Großteil der Anfänger-Verwirrung.

Bedingungen und Logik

In jedem boolean-Kontext — if, while, ?: und den logischen Operatoren && / || — wird der steuernde Wert anhand der obigen falsy-Liste durch eine boolean-Konvertierung geschickt.

if ("0") {
  // runs: "0" is a non-empty string, therefore truthy
}

if (0 || "fallback") {
  // "fallback" is returned: 0 is falsy, so || moves to the next value
}

Vergleiche

Die Gleichheitsoperatoren führen ihre eigene Koercion durch, und der lockere ==-Operator hat insbesondere Regeln, die subtil genug sind, um ein eigenes Kapitel zu verdienen. Kurz gesagt: Bevorzuge das strenge ===, das niemals konvertiert. Den vollständigen Satz an Überraschungen (wie [] == ![] das true ergibt) findest du bei den Vergleichsoperatoren.

Object-zu-Primitiv-Konvertierung

Wenn ein object dort verwendet wird, wo ein Primitiv erwartet wird (Konkatenation, Arithmetik, eine Alert-Meldung), konvertiert JavaScript es zuerst in ein Primitiv. Dazu ruft es die Methode Symbol.toPrimitive des object auf, sofern eine vorhanden ist; andernfalls fällt es auf valueOf() und toString() zurück und wählt die Reihenfolge je nachdem, ob eine Zahl oder ein string „angedeutet" wird. Deshalb wird ein einfaches object zu "[object Object]" und ein array zu einem durch Kommas verbundenen string — das stammt vom Standard-toString(). Du kannst das Ergebnis anpassen, indem du diese Methoden auf deinen eigenen Objekten definierst, aber für den alltäglichen Code reicht es zu wissen, dass die Konvertierung existiert und JSON.stringify() zu verwenden, wenn du ein lesbares object haben möchtest.

Häufige Stolperfallen

Eine Handvoll Konvertierungsergebnisse ist für die meisten „Warte, was?"-Momente verantwortlich. Behalte diese im Hinterkopf:

Schauen wir die seltsamen Fälle durch:

• +[] ist 0. Die numerische Konvertierung wandelt das array zunächst in einen string ("") um, dann wird der leere string zu 0 konvertiert.
• +{} ist NaN. Das object wird zu "[object Object]", was keine gültige Zahl ist, daher wird es zu NaN konvertiert.
• "" + 1 ist "1". Weil + auf einen string traf, hat er konkateniert statt addiert.
• [] + [] ist "". Jedes array wird zu einem leeren string, und "" + "" ist "".

Das sind keine Bugs — sie folgen exakt den oben beschriebenen Regeln. Sie wirken nur seltsam, weil zwei verschiedene Konvertierungen in einem einzigen Ausdruck verkettet werden.

Zusammenfassung

• JavaScript konvertiert Werte zu string, number oder boolean — explizit über String(), Number(), Boolean() oder implizit durch Koercion.
• String: Primitive werden als ihr Text dargestellt; [1,2,3] wird zu "1,2,3", [] wird zu "" und ein einfaches object wird zu "[object Object]".
• Number: null ist 0, undefined ist NaN, "" ist 0; Strings werden bereinigt und dann strikt geparst. Verwende +value als Kurzschreibweise und parseInt/parseFloat (mit einem Radix) für tolerantes Parsen vom Anfang des Strings.
• Boolean: Nur false, 0, -0, 0n, "", null, undefined und NaN sind falsy; alles andere — einschließlich "0", "false", [] und {} — ist truthy.
• + konkateniert, wenn eine Seite ein string ist; jeder andere arithmetische Operator konvertiert in eine Zahl.
• Im Zweifel explizit konvertieren und mit === vergleichen.

Du wirst diese Regeln ständig beim Arbeiten mit Zahlen, strings und Benutzereingaben in Variablen anwenden.

Teste dein Wissen