Konverze typu JavaScript

Obsah

    Zobrazit obsah

  • Převod řetězců na čísla

  • Převod čísel na řetězce

  • Převod dat na čísla

  • Převod čísel na data

  • Převod booleovských hodnot na čísla

  • Převod čísel na booleovské

Konverze typu JavaScript

Proměnné JavaScriptu lze převést na novou proměnnou a jiný datový typ:

  • Pomocí funkce JavaScript

  • Automaticky samotným JavaScriptem

Převod řetězců na čísla

Globální metoda Number() převádí proměnnou (nebo hodnotu) na číslo.

Číselný řetězec (např. „3.14“) se převede na číslo (např. 3.14).

Prázdný řetězec (jako "") se převede na 0.

Nečíselný řetězec (jako "Jan") se převede na NaN (není číslo).

Příklady

Tyto převedou:

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

Tyto nebudou převedeny:

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

Zkuste to sami →

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

Metody čísel

V kapitole Metody čísel jste najde více metod, které lze použít k převodu řetězců na čísla:

Method

Popis

Number()

Vrátí číslo převedené z jeho argumentu

parseFloat()

Zanalyzuje řetězec a vrátí číslo s plovoucí desetinnou čárkou

parseInt()

Zanalyzuje řetězec a vrátí celé číslo

Unary + operátor

Lze použít unární operátor + převést proměnnou na číslo:

Příklad

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

Zkuste to sami →

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

Pokud proměnnou nelze převést, stále se z ní stane číslo, ale s hodnotou NaN (Není číslo):

Příklad

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

Zkuste to sami →

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

Převod čísel na řetězce

Globální metoda String() může převádět čísla na řetězce.

Lze jej použít na jakýkoli typ čísel, literálů, proměnných nebo výrazů:

Příklad

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

Zkuste to sami →

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

Metoda Number toString() dělá totéž.

Příklad

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

Zkuste to sami →

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

Více metod

V kapitole Metody čísel jste najde více metod, které lze použít k převodu čísel na řetězce:

toExponential()

Vrátí řetězec se zaokrouhleným číslem a zapsaným pomocí exponenciálního zápisu.

toFixed()

Vrátí řetězec se zaokrouhleným číslem a zapsaným na zadaný počet desetinných míst.

toPrecision()

Vrátí řetězec s číslem zapsaným se zadanou délkou

Převod dat na čísla

Globální metodu Number() lze použít k převodu dat na čísla.

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

Metoda data getTime() dělá totéž.

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

Převod dat na řetězce

Globální metoda String() dokáže převést data na struny.

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

Metoda Date toString() dělá totéž.

Příklad

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

V kapitole Metody data si najde více metod, které lze použít k převodu dat na řetězce:

getDate()

Získejte den jako číslo (1-31)

getDay()

Získejte číslo dne v týdnu (0-6)

getFullYear()

Získejte čtyřmístný rok (yyyy)

getHours()

Získejte hodinu (0-23)

getMilliseconds()

Získejte milisekundy (0-999)

getMinutes()

Získejte minuty (0-59)

getMonth()

Získejte měsíc (0-11)

getSeconds()

Získejte sekundy (0-59)

getTime()

Získejte čas (milisekundy od 1. ledna 1970)

Převod booleovských hodnot na čísla

Globální metoda Number() může také převádět booleovské hodnoty na čísla.

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

Převod booleovských hodnot na řetězce

Globální metoda String() dokáže převést logické hodnoty na struny.

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

Booleovská metoda toString() dělá totéž.

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

Automatická konverze typu

Když se JavaScript pokusí pracovat na "nesprávném" datovém typu, pokusí se o to převést hodnotu na typ "správný".

Výsledek není vždy takový, jaký očekáváte:

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

Zkuste to sami →

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

Automatická konverze řetězců

JavaScript při pokusu automaticky volá funkci toString() proměnné. k "výstupu" objektu nebo proměnné:

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"

Čísla a booleovské hodnoty jsou také převedeny, ale není to příliš viditelné:

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

Konverzní tabulka typů JavaScript

Tato tabulka ukazuje výsledek převodu různých hodnot JavaScriptu na Number, String a Boolean:

Původní hodnota:

false

Převedeno na číslo:

0

Převedeno na řetězec:

"false"

Převedeno na logickou hodnotu:

false

Zkuste to →

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

Původní hodnota:

true

Převedeno na číslo:

1

Převedeno na řetězec:

"true"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

0

Převedeno na číslo:

0

Převedeno na řetězec:

"0"

Převedeno na logickou hodnotu:

false

Zkuste to →

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

Původní hodnota:

1

Převedeno na číslo:

1

Převedeno na řetězec:

"1"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

"0"

Převedeno na číslo:

0

Převedeno na řetězec:

"0"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

"000"

Převedeno na číslo:

0

Převedeno na řetězec:

"000"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

"1"

Převedeno na číslo:

1

Převedeno na řetězec:

"1"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

NaN

Převedeno na číslo:

NaN

Převedeno na řetězec:

"NaN"

Převedeno na logickou hodnotu:

false

Zkuste to →

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

Původní hodnota:

Infinity

Převedeno na číslo:

Infinity

Převedeno na řetězec:

"Infinity"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

-Infinity

Převedeno na číslo:

-Infinity

Převedeno na řetězec:

"-Infinity"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

""

Převedeno na číslo:

0

Převedeno na řetězec:

""

Převedeno na logickou hodnotu:

false

Zkuste to →

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

Původní hodnota:

"20"

Převedeno na číslo:

20

Převedeno na řetězec:

"20"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

NaN

Převedeno na číslo:

"twenty"

Převedeno na řetězec:

"twenty"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

[ ]

Převedeno na číslo:

0

Převedeno na řetězec:

""

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

[20]

Převedeno na číslo:

20

Převedeno na řetězec:

"20"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

[10,20]

Převedeno na číslo:

NaN

Převedeno na řetězec:

"10,20"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

["twenty"]

Převedeno na číslo:

NaN

Převedeno na řetězec:

"twenty"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

["ten","twenty"]

Převedeno na číslo:

NaN

Převedeno na řetězec:

"ten,twenty"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

function(){}

Převedeno na číslo:

NaN

Převedeno na řetězec:

"function(){}"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

{ }

Převedeno na číslo:

NaN

Převedeno na řetězec:

"[object Object]"

Převedeno na logickou hodnotu:

true

Zkuste to →

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

Původní hodnota:

null

Převedeno na číslo:

0

Převedeno na řetězec:

"null"

Převedeno na logickou hodnotu:

false

Zkuste to →

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

Původní hodnota:

undefined

Převedeno na číslo:

NaN

Převedeno na řetězec:

"undefined"

Převedeno na logickou hodnotu:

false

Zkuste to →

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

Hodnoty v uvozovkách označují hodnoty řetězce.

Červené hodnoty označují hodnoty, které (někteří) programátoři neočekávají.