JavaScript-typkonverteringar


Innehållsförteckning

    Visa innehållsförteckning

  • Konvertera strängar till tal

  • Konvertera tal till strängar

  • Konvertera datum till siffror

  • Konvertera siffror till datum

  • Konvertera booleaner till tal

  • Konvertera tal till booleaner

JavaScript-typkonvertering

JavaScript-variabler kan konverteras till en ny variabel och en annan datatyp:

  • Genom att använda en JavaScript-funktion

  • Automatiskt av JavaScript själv


Konvertera strängar till tal

Den globala metoden Number() omvandlar en variabel (eller ett värde) till ett tal.

En numerisk sträng (som "3.14") konverteras till ett tal (som 3.14).

En tom sträng (som "") konverteras till 0.

En icke-numerisk sträng (som "John") konverteras till NaN (Inte ett tal).

Exempel

Dessa kommer att konvertera:

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

Dessa konverterar inte:

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

Prova själv →

<!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 hittar fler metoder som kan användas för att konvertera strängar till tal:

Method

Beskrivning

Number()

Returnerar ett tal, konverterat från dess argument

parseFloat()

Analyserar en sträng och returnerar ett flyttal

parseInt()

Analyserar en sträng och returnerar ett heltal


The Unary + Operatör

Operatorn unary + kan användas för att konvertera en variabel till ett tal:

Exempel

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

Prova själv →

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


Om variabel kan inte konverteras, den blir fortfarande ett tal, men med värdet NaN (Inte ett nummer):

Exempel

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

Prova själv →

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




Konvertera tal till strängar

Den globala metoden String() kan konvertera tal till strängar.

Den kan användas på alla typer av tal, bokstaver, variabler eller uttryck:

Exempel

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

Prova själv →

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

Number-metoden toString() gör samma sak.

Exempel

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

Prova själv →

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

Fler metoder

I kapitlet Nummermetoder kan du hittar fler metoder som kan användas för att konvertera tal till strängar:

toExponential()

Returnerar en sträng, med ett tal avrundat och skrivet med exponentiell notation.

toFixed()

Returnerar en sträng, med ett tal avrundat och skrivet med ett angivet antal decimaler.

toPrecision()

Returnerar en sträng, med ett tal skrivet med en angiven längd


Konvertera datum till siffror

Den globala metoden Number() kan användas för att konvertera datum till tal.

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

Datummetoden getTime() gör samma sak.

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

Konvertera datum till strängar

Den globala metoden String() kan konvertera datum till strängar.

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

Datummetoden toString() gör samma sak.

Exempel

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

I kapitlet Date Methods, you hittar fler metoder som kan användas för att konvertera datum till strängar:

getDate()

Få dagen som ett nummer (1-31)

getDay()

Få veckodagen ett nummer (0-6)

getFullYear()

Få det fyrsiffriga året (åååå)

getHours()

Få timmen (0-23)

getMilliseconds()

Få millisekunderna (0-999)

getMinutes()

Hämta minuterna (0-59)

getMonth()

Få månaden (0-11)

getSeconds()

Få sekunderna (0-59)

getTime()

Få tiden (millisekunder sedan 1 januari 1970)


Konvertera booleaner till tal

Den globala metoden Number() kan också konvertera booleaner till tal.

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

Konvertera booleaner till strängar

Den globala metoden String() kan konvertera booleaner till strängar.

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

Den booleska metoden toString() gör samma sak.

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

Automatisk typkonvertering

När JavaScript försöker använda en "fel" datatyp kommer den att försöka göra det konvertera värdet till en "rätt" typ.

Resultatet är inte alltid som du förväntar dig:

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

Prova själv →

<!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 strängkonvertering

JavaScript anropar automatiskt variabelns toString()-funktion när du försöker för att "mata ut" ett 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 och booleaner konverteras också, men detta är inte särskilt synligt:

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

JavaScript-typkonverteringstabell

Den här tabellen visar resultatet av att konvertera olika JavaScript-värden till Number, String och Boolean:


Ursprungligt värde:

false

Konverterat till nummer:

0

Konverterat till sträng:

"false"

Konverterat till booleskt:

false

Prova →

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



Ursprungligt värde:

true

Konverterat till nummer:

1

Konverterat till sträng:

"true"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

0

Konverterat till nummer:

0

Konverterat till sträng:

"0"

Konverterat till booleskt:

false

Prova →

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



Ursprungligt värde:

1

Konverterat till nummer:

1

Konverterat till sträng:

"1"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

"0"

Konverterat till nummer:

0

Konverterat till sträng:

"0"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

"000"

Konverterat till nummer:

0

Konverterat till sträng:

"000"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

"1"

Konverterat till nummer:

1

Konverterat till sträng:

"1"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

NaN

Konverterat till nummer:

NaN

Konverterat till sträng:

"NaN"

Konverterat till booleskt:

false

Prova →

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



Ursprungligt värde:

Infinity

Konverterat till nummer:

Infinity

Konverterat till sträng:

"Infinity"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

-Infinity

Konverterat till nummer:

-Infinity

Konverterat till sträng:

"-Infinity"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

""

Konverterat till nummer:

0

Konverterat till sträng:

""

Konverterat till booleskt:

false

Prova →

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



Ursprungligt värde:

"20"

Konverterat till nummer:

20

Konverterat till sträng:

"20"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

NaN

Konverterat till nummer:

"twenty"

Konverterat till sträng:

"twenty"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

[ ]

Konverterat till nummer:

0

Konverterat till sträng:

""

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

[20]

Konverterat till nummer:

20

Konverterat till sträng:

"20"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

[10,20]

Konverterat till nummer:

NaN

Konverterat till sträng:

"10,20"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

["twenty"]

Konverterat till nummer:

NaN

Konverterat till sträng:

"twenty"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

["ten","twenty"]

Konverterat till nummer:

NaN

Konverterat till sträng:

"ten,twenty"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

function(){}

Konverterat till nummer:

NaN

Konverterat till sträng:

"function(){}"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

{ }

Konverterat till nummer:

NaN

Konverterat till sträng:

"[object Object]"

Konverterat till booleskt:

true

Prova →

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



Ursprungligt värde:

null

Konverterat till nummer:

0

Konverterat till sträng:

"null"

Konverterat till booleskt:

false

Prova →

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



Ursprungligt värde:

undefined

Konverterat till nummer:

NaN

Konverterat till sträng:

"undefined"

Konverterat till booleskt:

false

Prova →

<!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ärden inom citattecken indikerar strängvärden.

Röda värden indikerar värden (vissa) programmerare kanske inte förväntar sig.