JavaScript - Typkonvertierungen

Hallo da draußen, angehende JavaScript-Entwickler! Heute tauchen wir ein in die faszinierende Welt der Typkonvertierungen in JavaScript. Keine Sorge, wenn ihr neu im Programmieren seid; ich werde euch auf dieser Reise Schritt für Schritt führen, genau wie ich es über die Jahre mit unzähligen Schülern gemacht habe. Also holt euch eine Tasse Kaffee (oder eure Lieblingsgetränk) und los geht's!

JavaScript Typkonvertierungen

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was Typkonvertierung bedeutet. Stellen Sie sich vor, Sie haben eine Schachtel Legosteine, aber einige Teile sind aus Holz. Um Ihr Lego-Schloss zu bauen, müssen Sie diese hölzernen Teile in Lego-Steine umwandeln. Genau das ist auch die Typkonvertierung in JavaScript – Daten von einem Typ in einen anderen umwandeln.

In JavaScript gibt es zwei Hauptarten der Konvertierung:

1. Implizite Konvertierung (auch als Typzwangskonvertierung bekannt)
2. Explizite Konvertierung (auch als Typumwandlung bekannt)

Lassen Sie uns jeden dieser Punkte im Detail untersuchen.

Implizite Typkonvertierung

Implizite Konvertierung passiert automatisch, wenn JavaScript versucht, eine Operation auf Werten verschiedener Typen auszuführen. Es ist so, als ob JavaScript sagt: "Keine Sorge, ich habe das im Griff!" und die Typen im Hintergrund umwandelt.

Konvertierung zu String (Implizite Konvertierung)

JavaScript ist quite freundlich, wenn es darum geht, Dinge in Strings umzuwandeln. Es ist wie ein Freund, der mit jedem ins Gespräch kommen kann!

let num = 5;
let str = "Die Zahl ist: " + num;
console.log(str); // Ausgabe: "Die Zahl ist: 5"
console.log(typeof str); // Ausgabe: "string"

In diesem Beispiel hat JavaScript automatisch die Zahl 5 in einen String umgewandelt, als wir den + Operator mit einem String verwendet haben. Es ist, als ob JavaScript um die Zahl Anführungszeichen gesetzt hätte.

Konvertierung zu Number (Implizite Konvertierung)

Wenn es um Zahlen geht, versucht JavaScript sein Bestes, um die Dinge zu verstehen, ähnlich wie ein Mathematiklehrer, der die undeutliche Handschrift eines Schülers entziffern muss.

let str = "10";
let num = str - 5;
console.log(num); // Ausgabe: 5
console.log(typeof num); // Ausgabe: "number"

Hier hat JavaScript den - Operator gesehen und gedacht: "Aha! Wir machen Mathematik!" Also hat es den String "10" in die Zahl 10 umgewandelt, bevor es 5 subtrahiert hat.

Konvertierung zu Boolean (Implizite Konvertierung)

JavaScript hat eine einfache Regel für die Konvertierung in Booleans: einige Werte werden als "wahr" und andere als "falsch" angesehen. Es ist wie das Sortieren von Schülern in "anwesend" und "abwesend".

if ("Hallo") {
console.log("Dies wird ausgeführt, weil 'Hallo' wahr ist");
}

if (0) {
console.log("Dies wird nicht ausgeführt, weil 0 falsch ist");
}

In diesen Beispielen konvertiert JavaScript "Hallo" implizit zu true und 0 zu false.

Null zu Number (Implizite Konvertierung)

Null ist ein trickreicher Kunde. Wenn es in eine Zahl umgewandelt wird, wird es zu 0. Es ist wie ein Schüler, der seine Hausaufgaben nicht eingereicht hat, aber trotzdem 0 Punkte bekommt.

let x = null;
console.log(+x); // Ausgabe: 0

Der unäre + Operator versucht, null in eine Zahl umzuwandeln, was in 0 resultiert.

Undefined mit Number und Boolean (Implizite Konvertierung)

Undefined ist noch trickreicher. Es ist wie ein Schüler, der nicht nur seine Hausaufgaben nicht eingereicht hat, sondern nicht einmal auf der Klassliste steht!

let x;
console.log(+x); // Ausgabe: NaN (Nicht eine Zahl)
console.log(Boolean(x)); // Ausgabe: false

Wenn Undefined in eine Zahl umgewandelt wird, wird es zu NaN. Wenn es in ein Boolean umgewandelt wird, wird es zu false.

Explizite Typkonvertierung

Explizite Konvertierung geschieht, wenn wir, die Programmierer, die Kontrolle übernehmen und JavaScript genau mitteilen, welchen Typ wir möchten. Es ist wie die Regie eines Spiels und das genaue Anweisen der Schauspieler, welche Rollen sie spielen sollen.

Konvertierung zu String (Explizite Konvertierung)

Wir haben einige Methoden zur Verfügung, um in Strings umzuwandeln:

let num = 123;
let str1 = String(num);
let str2 = num.toString();
let str3 = num + "";

console.log(str1, typeof str1); // Ausgabe: "123" string
console.log(str2, typeof str2); // Ausgabe: "123" string
console.log(str3, typeof str3); // Ausgabe: "123" string

Alle diese Methoden erzielen das gleiche Ergebnis, aber String() und toString() sind direkter in unseren Absichten.

Konvertierung zu Number (Explizite Konvertierung)

Für die Konvertierung in Zahlen haben wir ähnliche Optionen:

let str = "456";
let num1 = Number(str);
let num2 = parseInt(str);
let num3 = +str;

console.log(num1, typeof num1); // Ausgabe: 456 number
console.log(num2, typeof num2); // Ausgabe: 456 number
console.log(num3, typeof num3); // Ausgabe: 456 number

Number() und parseInt() sind direkter in dem, was wir versuchen zu erreichen, während der unäre + Operator eine Abkürzung ist, die einige Entwickler verwenden.

Konvertierung zu Boolean (Explizite Konvertierung)

Die Konvertierung in Boolean ist einfach:

let str = "Hallo";
let bool1 = Boolean(str);
let bool2 = !!str;

console.log(bool1, typeof bool1); // Ausgabe: true boolean
console.log(bool2, typeof bool2); // Ausgabe: true boolean

Die Boolean() Funktion ist klar und lesbar. Die doppelte Negation (!!) ist eine Abkürzung, die einige Entwickler verwenden, aber für Anfänger verwirrend sein kann.

Konvertierung von Datum zu String/Number

Dates sind ein spezieller Fall in JavaScript. Sie können in beide Richtungen konvertiert werden:

let date = new Date();
let dateString = String(date);
let dateNumber = Number(date);

console.log(dateString); // Ausgabe: "Mon May 15 2023 12:34:56 GMT+0000 (Coordinated Universal Time)"
console.log(dateNumber); // Ausgabe: 1684154096000 (Millisekunden seit dem 1. Januar 1970)

Das Konvertieren eines Datums in einen String gibt uns eine menschenlesbare Formatierung, während das Konvertieren in eine Zahl die Millisekunden seit dem Unix-Zeitalter gibt.

Konvertierungstabelle in JavaScript

Um alle Konvertierungsmethoden, die wir gelernt haben, zusammenzufassen, hier ist eine praktische Tabelle:

Ursprünglicher Wert	zu String	zu Number	zu Boolean
false	"false"	0	false
true	"true"	1	true
0	"0"	0	false
1	"1"	1	true
"0"	"0"	0	true
"1"	"1"	1	true
NaN	"NaN"	NaN	false
Infinity	"Infinity"	Infinity	true
-Infinity	"-Infinity"	-Infinity	true
""	""	0	false
"20"	"20"	20	true
[ ]	""	0	true
[20]	"20"	20	true
[10,20]	"10,20"	NaN	true
["twenty"]	"twenty"	NaN	true
["ten","twenty"]	"ten,twenty"	NaN	true
function(){}	"function(){}"	NaN	true
{ }	"[object Object]"	NaN	true
null	"null"	0	false
undefined	"undefined"	NaN	false

Und das war's! Wir haben die Landschaft der JavaScript-Typkonvertierungen durchquert. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, mit diesen Konzepten zu experimentieren. Wer weiß? Vielleicht finden Sie sogar Spaß daran, Lego-Steine in Holzblöcke und zurück umzuwandeln!

Happy Coding, zukünftige JavaScript-Meister!

Credits: Image by storyset