JavaScript-typekonverteringer

Indholdsfortegnelse

    Vis indholdsfortegnelse

  • Konvertering af strenge til tal

  • Konvertering af tal til strenge

  • Konvertering af datoer til tal

  • Konvertering af tal til datoer

  • Konvertering af Boolean til tal

  • Konvertering af tal til booleaner

JavaScript Type konvertering

JavaScript-variabler kan konverteres til en ny variabel og en anden datatype:

  • Ved brug af en JavaScript-funktion

  • Automatisk af JavaScript selv

Konvertering af strenge til tal

Den globale metode Number() konverterer en variabel (eller en værdi) til et tal.

En numerisk streng (som "3.14") konverteres til et tal (som 3.14).

En tom streng (som "") konverteres til 0.

En ikke-numerisk streng (som "John") konverteres til NaN (ikke et tal).

Eksempler

Disse vil konvertere:

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

Disse vil ikke konvertere:

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

Prøv det selv →

<!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>

Nummermetoder

I kapitlet Nummermetoder kan du vil finde flere metoder, der kan bruges til at konvertere strenge til tal:

Method

Beskrivelse

Number()

Returnerer et tal, konverteret fra dets argument

parseFloat()

Parser en streng og returnerer et flydende kommatal

parseInt()

Parser en streng og returnerer et heltal

Unary + Operatør

Operatoren unary + kan bruges til konverter en variabel til et tal:

Eksempel

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

Prøv det selv →

<!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>

Hvis variabel kan ikke konverteres, den bliver stadig et tal, men med værdien NaN (Ikke et nummer):

Eksempel

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

Prøv det selv →

<!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>

Konvertering af tal til strenge

Den globale metode String() kan konvertere tal til strenge.

Det kan bruges på enhver type tal, bogstaver, variabler eller udtryk:

Eksempel

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

Prøv det selv →

<!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>

Talmetoden toString() gør det samme.

Eksempel

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

Prøv det selv →

<!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>

Flere metoder

I kapitlet Nummermetoder kan du vil finde flere metoder, der kan bruges til at konvertere tal til strenge:

toExponential()

Returnerer en streng med et tal afrundet og skrevet med eksponentiel notation.

toFixed()

Returnerer en streng med et tal afrundet og skrevet med et angivet antal decimaler.

toPrecision()

Returnerer en streng med et tal skrevet med en specificeret længde

Konvertering af datoer til tal

Den globale metode Number() kan bruges til at konvertere datoer til tal.

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

Datometoden getTime() gør det samme.

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

Konvertering af datoer til strenge

Den globale metode String() kan konvertere datoer til strenge.

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

Datometoden toString() gør det samme.

Eksempel

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

I kapitlet Datometoder kan du vil finde flere metoder, der kan bruges til at konvertere datoer til strenge:

getDate()

Få dagen som et tal (1-31)

getDay()

Få ugedagen et tal (0-6)

getFullYear()

Få det firecifrede årstal (åååå)

getHours()

Få timen (0-23)

getMilliseconds()

Få millisekunderne (0-999)

getMinutes()

Få minutterne (0-59)

getMonth()

Få måneden (0-11)

getSeconds()

Få sekunderne (0-59)

getTime()

Få tiden (millisekunder siden 1. januar 1970)

Konvertering af Boolean til tal

Den globale metode Number() kan også konvertere booleaner til tal.

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

Konvertering af Boolean til strenge

Den globale metode String() kan konvertere booleaner til strenge.

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

Den boolske metode toString() gør det samme.

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

Automatisk typekonvertering

Når JavaScript forsøger at operere på en "forkert" datatype, vil den forsøge det konverter værdien til en "rigtig" type.

Resultatet er ikke altid, hvad du forventer:

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

Prøv det selv →

<!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>

Automatisk strengkonvertering

JavaScript kalder automatisk variablens toString()-funktion, når du prøver at "outputte" et objekt eller en variabel:

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"

Tal og booleaner konverteres også, men dette er ikke særlig synligt:

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

JavaScript Type Konverteringstabel

Denne tabel viser resultatet af konvertering af forskellige JavaScript-værdier til Number, String og Boolean:

Oprindelig værdi:

false

Konverteret til nummer:

0

Konverteret til streng:

"false"

Konverteret til Boolean:

false

Prøv det →

<!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>

Oprindelig værdi:

true

Konverteret til nummer:

1

Konverteret til streng:

"true"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

0

Konverteret til nummer:

0

Konverteret til streng:

"0"

Konverteret til Boolean:

false

Prøv det →

<!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>

Oprindelig værdi:

1

Konverteret til nummer:

1

Konverteret til streng:

"1"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

"0"

Konverteret til nummer:

0

Konverteret til streng:

"0"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

"000"

Konverteret til nummer:

0

Konverteret til streng:

"000"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

"1"

Konverteret til nummer:

1

Konverteret til streng:

"1"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

NaN

Konverteret til nummer:

NaN

Konverteret til streng:

"NaN"

Konverteret til Boolean:

false

Prøv det →

<!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>

Oprindelig værdi:

Infinity

Konverteret til nummer:

Infinity

Konverteret til streng:

"Infinity"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

-Infinity

Konverteret til nummer:

-Infinity

Konverteret til streng:

"-Infinity"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

""

Konverteret til nummer:

0

Konverteret til streng:

""

Konverteret til Boolean:

false

Prøv det →

<!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>

Oprindelig værdi:

"20"

Konverteret til nummer:

20

Konverteret til streng:

"20"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

NaN

Konverteret til nummer:

"twenty"

Konverteret til streng:

"twenty"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

[ ]

Konverteret til nummer:

0

Konverteret til streng:

""

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

[20]

Konverteret til nummer:

20

Konverteret til streng:

"20"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

[10,20]

Konverteret til nummer:

NaN

Konverteret til streng:

"10,20"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

["twenty"]

Konverteret til nummer:

NaN

Konverteret til streng:

"twenty"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

["ten","twenty"]

Konverteret til nummer:

NaN

Konverteret til streng:

"ten,twenty"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

function(){}

Konverteret til nummer:

NaN

Konverteret til streng:

"function(){}"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

{ }

Konverteret til nummer:

NaN

Konverteret til streng:

"[object Object]"

Konverteret til Boolean:

true

Prøv det →

<!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>

Oprindelig værdi:

null

Konverteret til nummer:

0

Konverteret til streng:

"null"

Konverteret til Boolean:

false

Prøv det →

<!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>

Oprindelig værdi:

undefined

Konverteret til nummer:

NaN

Konverteret til streng:

"undefined"

Konverteret til Boolean:

false

Prøv det →

<!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>

Værdier i anførselstegn angiver strengværdier.

Røde værdier angiver værdier (nogle) programmører måske ikke forventer.