JavaScript-Typkonvertierungen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

  • Konvertieren von Zeichenfolgen in Zahlen

  • Konvertieren von Zahlen in Zeichenfolgen

  • Datumsangaben in Zahlen umwandeln

  • Zahlen in Datumsangaben umwandeln

  • Boolesche Werte in Zahlen umwandeln

  • Konvertieren von Zahlen in Boolesche Werte

JavaScript-Typkonvertierung

JavaScript-Variablen können in eine neue Variable und einen anderen Datentyp konvertiert werden:

  • Durch die Verwendung einer JavaScript-Funktion

  • Automatisch durch JavaScript selbst


Konvertieren von Zeichenfolgen in Zahlen

Die globale Methode Number() wandelt eine Variable (oder einen Wert) in eine Zahl um.

Eine numerische Zeichenfolge (wie „3.14“) wird in eine Zahl (wie 3.14) umgewandelt.

Eine leere Zeichenfolge (wie „“) wird in 0 konvertiert.

Eine nicht numerische Zeichenfolge (wie „John“) wird in NaN (Not a Number) umgewandelt.

Beispiele

Diese werden konvertieren:

Number("3.14")
Number(Math.PI)
Number(" ")
Number("")

Diese werden nicht konvertiert:

Number("99 88")
Number("John")

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Numbers</h1>
<h2>The Number() Method</h2>

<p>The Number() metod converts a variable (or value) into a number:</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
Number("3.14") + "<br>" +
Number(Math.PI) + "<br>" +
Number("    ") + "<br>" +
Number("") + "<br>" +
Number("99 88") + "<br>" +
Number("John") + "<br>";
</script>

</body>
</html>

Zahlenmethoden

Im Kapitel Zahlenmethoden erfahren Sie finden Sie weitere Methoden, die zum Konvertieren von Zeichenfolgen verwendet werden können Zahlen:

Method

Beschreibung

Number()

Gibt eine aus ihrem Argument konvertierte Zahl zurück

parseFloat()

Analysiert eine Zeichenfolge und gibt eine Gleitkommazahl zurück

parseInt()

Analysiert eine Zeichenfolge und gibt eine Ganzzahl zurück


Der unäre + Operator

Dazu kann der unäre +-Operator verwendet werden Wandeln Sie eine Variable in eine Zahl um:

Beispiel

let y = "5";     
// y is a string
let x = + y;      
// x is a number

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

<p id="demo"></p>

<script>
let y = "5";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>

</body>
</html>


Wenn die Variable nicht konvertiert werden kann, wird sie dennoch zu einer Zahl, jedoch mit dem Wert NaN (Keine Zahl):

Beispiel

let y = "John";  
// y is a string
let x = + y;      // x is a number (NaN)

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript typeof Operator</h2>

<p>The typeof operator returns the type of a variable or expression:</p>

<p id="demo"></p>

<script>
let y = "John";
let x = + y;
document.getElementById("demo").innerHTML = typeof y + "<br>" + typeof x;
</script>

</body>
</html>




Konvertieren von Zahlen in Zeichenfolgen

Die globale Methode String() kann Zahlen in Strings umwandeln.

Es kann für jede Art von Zahlen, Literalen, Variablen oder Ausdrücken verwendet werden:

Beispiel

String(x)         // returns a string from a number variable x
 String(123)       // returns a string from a number literal 123
 String(100 + 23)  // returns a string from a number from an expression

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>The JavaScript String() Method</h2>

<p>The String() method can convert a number to a string.</p>

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  String(x) + "<br>" +
  String(123) + "<br>" +
  String(100 + 23);
</script>
</body>
</html>

Die Number-Methode toString() macht dasselbe.

Beispiel

x.toString()
(123).toString()
(100 + 23).toString()

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Number Methods</h2>

<p>The toString() method converts a number to a string.</p>

<p id="demo"></p>

<script>
let x = 123;
document.getElementById("demo").innerHTML =
  x.toString() + "<br>" +
   (123).toString() + "<br>" +
   (100 + 23).toString();
</script>

</body>
</html>

Weitere Methoden

Im Kapitel Zahlenmethoden erfahren Sie finden Sie weitere Methoden, mit denen sich Zahlen umwandeln lassen Saiten:

toExponential()

Gibt eine Zeichenfolge mit einer gerundeten und in Exponentialschreibweise geschriebenen Zahl zurück.

toFixed()

Gibt eine Zeichenfolge mit einer gerundeten und mit einer angegebenen Anzahl von Dezimalstellen geschriebenen Zahl zurück.

toPrecision()

Gibt eine Zeichenfolge zurück, in der eine Zahl mit einer angegebenen Länge geschrieben ist


Datumsangaben in Zahlen umwandeln

Die globale Methode Number() kann zum Konvertieren von Datumsangaben verwendet werden Zahlen.

d = new Date();
Number(d)          // returns 1404568027739

Die Datumsmethode getTime() macht dasselbe.

d = new Date();
d.getTime()        // returns 1404568027739

Konvertieren von Datumsangaben in Zeichenfolgen

Die globale Methode String() kann Datumsangaben konvertieren Saiten.

 String(Date())  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

Die Date-Methode toString() macht dasselbe.

Beispiel

 Date().toString()  // returns "Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)"

Im Kapitel Datumsmethoden erfahren Sie finden Sie weitere Methoden, mit denen Datumsangaben konvertiert werden können Saiten:

getDate()

Holen Sie sich den Tag als Zahl (1-31)

getDay()

Geben Sie dem Wochentag eine Zahl (0-6)

getFullYear()

Holen Sie sich die vierstellige Jahreszahl (JJJJ)

getHours()

Holen Sie sich die Stunde (0-23)

getMilliseconds()

Holen Sie sich die Millisekunden (0-999)

getMinutes()

Holen Sie sich die Minuten (0-59)

getMonth()

Holen Sie sich den Monat (0-11)

getSeconds()

Holen Sie sich die Sekunden (0-59)

getTime()

Holen Sie sich die Zeit (Millisekunden seit dem 1. Januar 1970)


Boolesche Werte in Zahlen umwandeln

Die globale Methode Number() kann auch boolesche Werte in Zahlen umwandeln.

Number(false)     // returns 0
Number(true)      // returns 1

Konvertieren von Booleschen Werten in Strings

Die globale Methode String() kann Boolesche Werte in konvertieren Saiten.

String(false)      // returns "false"
String(true)       // returns "true"

Die boolesche Methode toString() macht dasselbe.

false.toString()   // returns "false"
  true.toString()    // returns "true"

Automatische Typkonvertierung

Wenn JavaScript versucht, mit einem „falschen“ Datentyp zu arbeiten, wird es dies versuchen Konvertieren Sie den Wert in einen „richtigen“ Typ.

Das Ergebnis ist nicht immer das, was Sie erwarten:

5 + null    // returns 5         because null is converted to 0
"5" + null  // returns "5null"   because null is converted to "null"
"5" + 2     // returns 
    "52"      because 2 is converted to "2"
 "5" - 2     // returns 3         because "5" is converted to 5
"5" * "2"   // returns 
    10        because "5" and "2" are 
    converted to 5 and 2

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
(5 + null) + "<br>"  +
("5" + null) + "<br>" +
("5" + 2) + "<br>" +
("5" - 2) + "<br>" +
("5" * "2") + "<br>" +
("5" / "2") + "<br>"
</script>

</body>
</html>



Automatische String-Konvertierung

Wenn Sie es versuchen, ruft JavaScript automatisch die Funktion toString() der Variablen auf um ein Objekt oder eine Variable „auszugeben“:

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString converts to "[object Object]"
// if myVar = [1,2,3,4]       // toString converts to "1,2,3,4"
// if myVar = new Date()      // toString converts to "Fri Jul 18 2014 09:08:55 GMT+0200"

Es werden auch Zahlen und Boolesche Werte konvertiert, was jedoch kaum sichtbar ist:

// if myVar = 123             // toString converts to "123"
// if myVar = true            // toString converts to "true"
// if myVar = false           // toString converts to "false"

JavaScript-Typkonvertierungstabelle

Diese Tabelle zeigt das Ergebnis der Konvertierung verschiedener JavaScript-Werte in Zahlen, Zeichenfolgen und Boolesche Werte:


Ursprünglicher Wert:

false

Konvertiert in Nummer:

0

Konvertiert in String:

"false"

In Booleschen Wert konvertiert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting false to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = false;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

true

Konvertiert in Nummer:

1

Konvertiert in String:

"true"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting true to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = true;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

0

Konvertiert in Nummer:

0

Konvertiert in String:

"0"

In Booleschen Wert konvertiert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 0 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 0;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

1

Konvertiert in Nummer:

1

Konvertiert in String:

"1"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the number 1 to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

"0"

Konvertiert in Nummer:

0

Konvertiert in String:

"0"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "0" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "0";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

"000"

Konvertiert in Nummer:

0

Konvertiert in String:

"000"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "000" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "000";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

"1"

Konvertiert in Nummer:

1

Konvertiert in String:

"1"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting the string "1" to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = 1;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

NaN

Konvertiert in Nummer:

NaN

Konvertiert in String:

"NaN"

In Booleschen Wert konvertiert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting NaN to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = NaN;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

Infinity

Konvertiert in Nummer:

Infinity

Konvertiert in String:

"Infinity"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

-Infinity

Konvertiert in Nummer:

-Infinity

Konvertiert in String:

"-Infinity"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting -Infinity to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = -Infinity;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

""

Konvertiert in Nummer:

0

Konvertiert in String:

""

In Booleschen Wert konvertiert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an empty string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

"20"

Konvertiert in Nummer:

20

Konvertiert in String:

"20"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a numeric string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "20";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

NaN

Konvertiert in Nummer:

"twenty"

Konvertiert in String:

"twenty"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a text string to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = "twenty";
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

[ ]

Konvertiert in Nummer:

0

Konvertiert in String:

""

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<p>Converting an empty array to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

[20]

Konvertiert in Nummer:

20

Konvertiert in String:

"20"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one numeric element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

[10,20]

Konvertiert in Nummer:

NaN

Konvertiert in String:

"10,20"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two numeric elements to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = [10,20];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

["twenty"]

Konvertiert in Nummer:

NaN

Konvertiert in String:

"twenty"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with one string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

["ten","twenty"]

Konvertiert in Nummer:

NaN

Konvertiert in String:

"ten,twenty"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<p>Converting an array with two string element to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
var x = ["ten","twenty"];
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

function(){}

Konvertiert in Nummer:

NaN

Konvertiert in String:

"function(){}"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting a function to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = function(){};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

{ }

Konvertiert in Nummer:

NaN

Konvertiert in String:

"[object Object]"

In Booleschen Wert konvertiert:

true

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting an object to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
const x = {};
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

null

Konvertiert in Nummer:

0

Konvertiert in String:

"null"

In Booleschen Wert konvertiert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting null to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = null;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>



Ursprünglicher Wert:

undefined

Konvertiert in Nummer:

NaN

Konvertiert in String:

"undefined"

In Booleschen Wert konvertiert:

false

Probieren Sie es aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Type Conversions</h2>

<p>Converting undefined to other types:</p>

<p id="demo" style="font-family:courier"></p>

<script>
let x = undefined;
document.getElementById("demo").innerHTML =
"Number : " + Number(x) + "<br>" +
"String : " + String(x) + "<br>" +
"Boolean: " + Boolean(x);
</script>

</body>
</html>


Werte in Anführungszeichen geben Zeichenfolgenwerte an.

Rote Werte weisen auf Werte hin, die (einige) Programmierer möglicherweise nicht erwarten.