Typkonvertierung in

Über Typkonvertierung

In JavaScript können Werte unterschiedliche Typen haben. Den Typ einer Variable kannst du durch eine explizite Typkonvertierung ändern. Darüber hinaus führt JavaScript auch eine Typumwandlung (implizite Typkonvertierung) durch, wenn der Kontext es erfordert.

Typkonvertierung

JavaScript hat, anders als viele andere Sprachen, kein Konstrukt, um einen Wert in einen (anderen) Typ umzuwandeln. Stattdessen kannst du einige eingebaute Helfer verwenden. Vor allem die globalen Objekte Boolean, Number und String lassen sich als Funktionen verwenden, um einen Wert in den jeweiligen Typ umzuwandeln.

In einen booleschen Wert umwandeln (Truthy-/Falsy-Werte)

Mit Boolean(value) kannst du jeden Wert in einen booleschen Wert umwandeln. Wie funktioniert das?

Es gibt eine feste Menge von Werten, die sogenannten falsy Werte, die zu false konvertiert werden. Vor allem false, 0, der leere String, null, undefined und NaN sind falsy. Der MDN-Artikel zu „Falsy" zeigt die vollständige Liste.

Für alle anderen Werte gibt Boolean true zurück. Diese Werte heißen truthy.

Boolean(-1);
// => true

Boolean(0);
// => false

Boolean(' ');
// => true

Boolean('');
// => false

Beachte, dass aufgrund der beschriebenen Regeln '0', 'false', [] und {} in JavaScript truthy sind.

In eine Zahl umwandeln

Mit Number(value) kannst du einen Wert in eine Zahl umwandeln. Leerzeichen am Anfang und am Ende eines Strings werden ignoriert, und ein leerer String wird zu 0 konvertiert. Wenn du versuchst, einen Nicht-Primitivwert oder einen String umzuwandeln, der keine Zahl darstellt, wird kein Fehler ausgelöst. Stattdessen ist das Ergebnis NaN (Not-A-Number).

Number('  -12.34  ');
// => -12.34

Number('1,2');
// => NaN

Number('1 2');
// => NaN

Number('');
// => 0

Number('10e3');
// => 10000

Number({ key: '123' });
// => NaN

Unten siehst du, was Number für andere primitive Werte zurückgibt.

Number(true);
// => 1

Number(false);
// => 0

Number(null);
// => 0

Number(undefined);
// => NaN

Beachte, dass Number() ohne Argument im Gegensatz zum letzten Beispiel per Definition 0 zurückgibt.

JavaScript bietet außerdem die Funktionen parseInt und parseFloat. Sie wenden lockerere Regeln dafür an, welche Strings in eine Zahl umgewandelt werden können. Deshalb solltest du Number als Konvertierungsfunktion bevorzugen, um unerwartete Ergebnisse zu vermeiden.

parseInt('123a45');
// => 123

Number('123a45');
// => NaN

In einen String umwandeln

Mit String(value) kannst du einen Wert in einen String umwandeln. Bei primitiven Werten ist das Ergebnis so, wie du es erwartest.

String(12.34);
// => '12.34'

String(false);
// => 'false'

String(null);
// => 'null'

String(undefined);
// => 'undefined'

Bei Arrays wendet die Funktion String die String-Konvertierung auf jedes Element an und verbindet die Ergebnisse mit einem Komma. Du kannst auch selbst die join-Methode verwenden, um zum Beispiel das Trennzeichen anzupassen. In diesen Fällen werden null und undefined allerdings in einen leeren String umgewandelt.

String([42, null, true, 'abc']);
// => '42,,true,abc'

Bei Objekten gibt String standardmäßig einen wenig hilfreichen Text zurück.

String({ key: 'value' });
// => '[object Object]'

Du kannst das Konvertierungsverhalten anpassen, indem du zum Beispiel eine toString-Methode bereitstellst. Der Abschnitt „Umwandlung von Objekten in primitive Werte" auf javascript.info erklärt die Details.

Eine weitere übliche Methode, um eine bessere String-Darstellung für Objekte und Arrays zu erhalten, ist die JSON-Kodierung. Du kannst mit JSON.stringify einen String erzeugen und mit JSON.parse wieder in ein Objekt oder Array zurückverwandeln.

const obj = {
  name: 'Gilda Guerra',
  address: {
    city: 'Goiânia',
  },
};

JSON.stringify(obj);
// => '{"name":"Gilda Guerra","address":{"city":"Goiânia"}}'

Typumwandlung

In bestimmten Kontexten wandelt JavaScript einen Wert automatisch in einen anderen Datentyp um, bevor es eine Anweisung auswertet. Diese implizite Konvertierung heißt Typumwandlung.

Boolescher Kontext

Wenn ein Wert in einem booleschen Kontext verwendet wird, wendet JavaScript dieselben Regeln wie die Funktion Boolean an, um den Wert implizit umzuwandeln.

• Wenn die Bedingung einer if-Anweisung kein boolescher Wert ist, wird eine Umwandlung angewendet, um zu bestimmen, ob die Bedingung erfüllt ist oder nicht. Dasselbe gilt für den ersten Operanden des ternären Operators ?.

  const num = 0;
  if (num) {
    // this block is NOT executed because 0 is falsy
  }
  
  const name = 'Jin';
  name ? 'name was provided' : 'no name provided';
  // => 'name was provided'
  

• Der Operand des logischen NICHT-Operators ! wird ebenfalls in einen booleschen Wert umgewandelt, bevor die NICHT-Operation angewendet wird.

  const name = '';
  !name;
  // => true
  

  Eine Folge des beschriebenen Verhaltens ist, dass !!value dieselbe Wirkung wie Boolean(value) hat. Trotzdem solltest du aus Gründen der Lesbarkeit Boolean verwenden.

• JavaScript wendet die Umwandlung auch auf die Operanden der logischen UND- (&&) und ODER-Operatoren (||) an. Aber denk daran, dass das Ergebnis des Ausdrucks nicht unbedingt ein boolescher Wert ist. Er gibt einen der ursprünglichen Operanden zurück (siehe MDN zu logischen Operatoren).

  null || 'hello';
  // => 'hello'
  

String-Kontext

Wenn der Additionsoperator + auf primitive Werte angewendet wird und ein Operand ein String ist, wird der andere ebenfalls in einen String umgewandelt. Die Konvertierungslogik ist dieselbe wie bei der Verwendung der Funktion String. Anschließend werden die beiden Strings aneinandergehängt.

let name;
'hello ' + name;
// => 'hello undefined'

Dieselbe implizite Konvertierung findet bei Nicht-String-Werten statt, die in Template-Strings eingebettet sind.

const degrees = 23;
`It is ${degrees} °C`;
// => 'Is is 23 °C.';

Numerischer Kontext

Viele Operatoren wandeln die Operanden nach der oben erklärten Logik der Funktion Number (falls nötig) in Zahlen um.

• Arithmetische Operatoren: + (wenn kein String beteiligt ist), -, *, /, %, **
• Unäre Plus- und Negationsoperatoren: +, -
• Vergleichsoperatoren (für Nicht-String-Operanden): >, >=, <, <=
• Bitweise Operatoren: |, &, ^, ~

Die MDN-Liste der Operatoren enthält weitere Details zu jedem dieser Operatoren.

Wenn ein Operand ein String sein könnte, ist es am besten, ihn immer explizit mit der Funktion Number umzuwandeln, um Fehler zu vermeiden.

'1' + '2';
// => '12'
// addition operator in string context as explained above

Number('1') + Number('2');
// => 3

Manchmal siehst du, wie der unäre Plus-Operator verwendet wird, um einen String in eine Zahl umzuwandeln. Das ist nicht empfehlenswert, weil es viel schwerer zu lesen ist als der explizite Aufruf von Number.

const value = '42';
+value;
// => 42

Number(value);
// => 42

Die Verwendung der lockeren Gleichheits- und Ungleichheitsoperatoren ==/!= beinhaltet ebenfalls oft eine implizite Konvertierung in eine Zahl. Die genaue Logik dieser Operatoren ist allerdings recht kompliziert (siehe MDN zur lockeren Gleichheit). Die Ergebnisse sind schwer vorherzusagen und manchmal nicht das, was du erwarten würdest. Verwende stattdessen die strikten Gleichheits-/Ungleichheitsoperatoren ===/!==, um diese impliziten Konvertierungen zu vermeiden.