JavaScript - Type Conversions


Automatsko pretvaranje tipa

Većinu vremena JavaScript automatski pretvara vrijednosti iz jednog tipa podataka u drugi kada se koristi u izrazu. Na primjer, u matematičkim operacijama vrijednosti se automatski pretvaraju u brojeve. Međutim, krajnji rezultat nije uvijek onakav kakav ste očekivali:

alert("3" - 2);  // Ispisuje: 1 
alert("3" + 2);  // Ispisuje: "32" (jer je + ujedno i operator spajanja)
alert(3 + "2");  // Ispisuje: "32"
alert("3" * "2");  // Ispisuje: 6
alert("10" / "2");  // Ispisuje: 5
alert(1 + true);  // Ispisuje: 2 (jer se true pretvara u 1)
alert(1 + false);  // Ispisuje: 1 (jer se false pretvara u 0)
alert(1 + undefined);  // Ispisuje: NaN
alert(3 + null);  // Ispisuje: 3 (jer se null pretvara u 0)
alert("3" + null);  // Ispisuje: "3null"
alert(true + null);  // Ispisuje: 1
alert(true + undefined);  // Ispisuje: NaN
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Automatsko pretvaranje tipova podataka</title>
</head>
<body>
    <script>
    document.write("3" - 2);  // Ispisuje: 1
    document.write("<br>");
    
    document.write("3" + 2);  // Ispisuje: "32" (jer je + takođe operator spajanja)
    document.write("<br>");
    
    document.write(3 + "2");  // Ispisuje: "32"
    document.write("<br>");
    
    document.write("3" * "2");  // Ispisuje: 6
    document.write("<br>");
    
    document.write("10" / "2");  // Ispisuje: 5
    document.write("<br>");
    
    document.write(1 + true);  // Ispisuje: 2 (jer se true pretvara u 1)
    document.write("<br>");
    
    document.write(1 + false);  // Ispisuje: 1 (jer se false pretvara u 0)
    document.write("<br>");
    
    document.write(1 + undefined);  // Ispisuje: NaN
    document.write("<br>");
    
    document.write(3 + null);  // Ispisuje: 3 (jer se null pretvara u 0)
    document.write("<br>");
    
    document.write("3" + null);  // Ispisuje: "3null"
    document.write("<br>");
    
    document.write(true + null);  // Ispisuje: 1
    document.write("<br>");
    
    document.write(true + undefined);  // Ispisuje: NaN
    </script>
</body>
</html>

Postoje situacije kada moramo ručno pretvoriti vrijednost iz jednog tipa podataka u drugi. JavaScript nudi niz različitih metoda za izvođenje takvog zadatka pretvaranja tipa podataka. U sljedećem dijelu detaljno ćemo razmotriti te metode.



Pretvaranje vrijednosti u brojeve

Numerička konverzija obično je potrebna kada vrijednost čitamo iz stringa zasnovanog izvora poput unosa teksta, ali očekujemo da se unese broj ili ga želimo tretirati kao broj. U takvim situacijama možete koristiti globalnu metodu Number() za pretvaranje stringa u brojeve.

var str = "123";
alert(typeof str); // Ispisuje: string

var num = Number(str); // Postaje broj 123
alert(typeof num); // Ispisuje: number
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretvaranje numeričkog stringa u broj</title>
</head>
<body>
    <script>
    var str = "123";
    document.write(typeof str); // Ispisuje: string
    document.write("<br>");
    
    var num = Number(str); // Postaje broj 123
    document.write(typeof num); // Ispisuje: number
    </script>
</body>
</html>

Ako string nije važeći broj, rezultat će biti NaN. Prazne stringove pretvara u 0.

Number("10.5")  // vraća se 10.5
Number(true)  // vraća se 1
Number(false)  // vraća se 0
Number(null)  // vraća se 0
Number(" 123 ")  // vraća se 123
Number(" ")  // vraća se 0
Number("")  // vraća se 0
Number("123e-1")  // vraća se 12.3
Number("0xFF") // vraća se 255 (heksadecimalni prikaz)
Number("undefined")  // vraća se NaN
Number("null")  // vraća se NaN
Number("Hello World!")  // vraća se NaN


Pretvaranje vrijednosti u strigove

Slično tome, možete koristiti metodu String() za pretvaranje vrijednosti u string. Sljedeći primjer će vam pokazati kako pretvoriti logičku vrijednost u string.

var bool = true;
alert(typeof bool); // Ispisuje: boolean

var str = String(bool); // Postaje string "true"
alert(typeof str); // Ispisuje: string
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretvaranje logičke vrijednosti u string</title>
</head>
<body>
    <script>
    var bool = true;
    document.write(typeof bool); // Ispisuje: boolean
    document.write("<br>");
    
    var str = String(bool); // Postaje string "true"
    document.write(typeof str); // Ispisuje: string
    </script>
</body>
</html>

Metoda String() može se koristiti na bilo kojoj vrsti brojeva, varijabli ili izraza:

String(10.5)  // vraća se "10.5"
String(123)  // vraća se "123"
String(100 + 23)  // vraća se "123"
String(true)  // vraća se "true"
String(false)  // vraća se "false"
String(123e-1)  // vraća se "12.3"
String(0xFF) // vraća se "255"
String(undefined)  // vraća se "undefined"
String(null)  // vraća se "null"

Druga tehnika za pretvaranje brojeva u stringove je upotreba metode toString():

var num = 123;
alert(typeof num); // Ispisuje: number

var str = num.toString(); // Postaje string "123"
alert(typeof str); // Ispisuje: string
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretvori broj u string</title>
</head>
<body>
    <script>
    var num = 123;
    document.write(typeof num); // Ispisuje: number
    document.write("<br>");
    
    var str = num.toString(); // Postaje string "123"
    document.write(typeof str); // Ispisuje: string
    </script>
</body>
</html>


Pretvaranje vrijednosti u logičke vrijednosti (Boolean)

Logička pretvaranja su takođe prilično ravna. Možete koristiti metodu Boolean() za pretvaranje bilo koje vrijednosti u logičku vrijednost (tj. tačno (true) ili netačno (false)). Vrijednosti koje su intuitivno prazne, poput 0, null, false, undefined, NaN ili praznog stringa ("") postaju netačne (false). Ostale vrijednosti postaju istinite (true), kao što je prikazano u sljedećem primjeru:

Boolean(0) // vraća se false
Boolean(null)  // vraća se false
Boolean(false)  // vraća se false
Boolean(undefined)  // vraća se false
Boolean(NaN)  // vraća se false
Boolean("") // vraća se false
Boolean("0") // vraća se true
Boolean(1) // vraća se true
Boolean(true) // vraća se true
Boolean("false") // vraća se true
Boolean("Hello World!") // vraća se true
Boolean(" ") // vraća se true
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretvaranje vrijednosti u logičke vrijednosti</title>
</head>
<body>
    <script>
    document.write(Boolean(0) + "<br>"); // Ispisuje: false
    document.write(Boolean(null) + "<br>");  // Ispisuje: false
    document.write(Boolean(false) + "<br>");  // Ispisuje: false
    document.write(Boolean(undefined) + "<br>");  // Ispisuje: false
    document.write(Boolean(NaN) + "<br>");  // Ispisuje: false
    document.write(Boolean("") + "<br>"); // Ispisuje: false
    document.write(Boolean("0") + "<br>"); // Ispisuje: true
    document.write(Boolean(1) + "<br>"); // Ispisuje: true
    document.write(Boolean(true) + "<br>"); // Ispisuje: true
    document.write(Boolean("false") + "<br>"); // Ispisuje: true
    document.write(Boolean("Hello World!") + "<br>"); // Ispisuje: true
    document.write(Boolean(" ")); // Ispisuje: true
    </script>
</body>
</html>

Ako pažljivo vidite primjer, vidjećete da metoda Boolean() vraća true za string s nulom "0" i string "false", dok za vrijednosti 0 i false vraća false.



Objekt primitivnih konverzija

Sve konverzije koje smo do sada vidjeli izvode se na primitivnim tipovima (tipovi podataka koji mogu da sadrže samo jednu vrijednost odjednom). Ali šta će se dogoditi sa složenim vrstama podataka kao što je objekt? Hajde da vidimo.

JavaScript automatski izvodi konverziju objekta u string kada pokušavamo ispisati objekt poput upozorenja (obj) ili document.write(obj). Isto tako, pretvaranje broja u broj automatski se izvodi kada pokušavamo dodati ili oduzeti objekte ili primijeniti matematičke funkcije, na primjer, dodavanje ili oduzimanje datumskih objekata. Evo primjera:

var date1 = new Date(2020, 10, 13);
alert(date1); // Prikazuje string datuma kao: Fri Nov 13 2020 00:00:00

var date2 = new Date(2025, 8, 15);
var time = date2 - date1;
alert(time) // Prikazuje vremena u milisekundama: 228096000000
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Automatsko pretvaranje objekta pretvaranja primitivnih tipova podataka</title>
</head>
<body>
    <script>
    var date1 = new Date(2020, 10, 13);
    document.write(date1 + "<br>"); // Prikazuje string datuma kao: Fri Nov 13 2020 00:00:00
    
    var date2 = new Date(2025, 8, 15);
    var time = date2 - date1;
    document.write(time) // Prikazuje vremena u milisekundama: 228096000000
    </script>
</body>
</html>

Konverziju objekta u string možete izvršiti i ručno pomoću metode toString() koja vraća predstavljanje stringa objekta. Pored toga, možete koristiti metodu valueOf() na nekim objektima kao što je Date da biste izvršili konverziju objekta u broj. Evo primjera:

var arr = [1, 2, 3];
arr.toString(); // vraća "1,2,3"

var d = new Date(2020, 10, 13);
d.toDateString(); // vraća se kao Fri Nov 13 2020
d.valueOf(); // vraća 1605222000000
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Ručno pretvaranje objekta u primitivne tipove podataka</title>
</head>
<body>
    <script>
    var arr = [1, 2, 3];
    document.write(arr.toString() + "<br>"); // Ispisuje: "1,2,3"
    
    var d = new Date(2020, 10, 13);
    document.write(d.toDateString() + "<br>"); // Ispisuje: date like Fri Nov 13 2020 00:00:00
    document.write(d.valueOf()); // Ispisuje: 1605222000000
    </script>
</body>
</html>


Upisivanje pretvaranja pomoću operatora

Određeni JavaScript operateri, poput operatora + i -, mogu se koristiti i za izvršavanje pretvaranja tipova, kao što je prikazano u sljedećem primjeru:

var x = "10"; // x je string
var y = +x;
alert(typeof(y)); // Ispisuje: number
alert(y); // Ispisuje: 10

var x = 10; // x je broj
var y = x + "";
alert(typeof(y)); // Ispisuje: string
alert(y); // Ispisuje: 10

var x = "15"; // x je string
var y = x - 0;
alert(typeof(y)); // Ispisuje: number
alert(y); // Ispisuje: 15

var x = "123";
alert(typeof(!!x)); // Ispisuje: boolean
alert(!!x); // Ispisuje: true

var x = "Hello World!";
var y = +x;
alert(typeof(y));// Ispisuje: number
alert(y); // Ispisuje: NaN
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Izvršavanje pretvaranja tipova podataka pomoću operatora</title>
</head>
<body>
    <script>
    var x = "10"; // x je string
    var y = +x;
    document.write(typeof(y) + "<br>"); // Ispisuje: number
    document.write(y + "<br>"); // Ispisuje: 10
    
    var x = 10; // x je broj
    var y = x + "";
    document.write(typeof(y) + "<br>"); // Ispisuje: string
    document.write(y + "<br>"); // Ispisuje: 10
    
    var x = "15"; // x je string
    var y = x - 0;
    document.write(typeof(y) + "<br>"); // Ispisuje: number
    document.write(y + "<br>"); // Ispisuje: 15
    
    var x = "123";
    document.write(typeof(!!x) + "<br>"); // Ispisuje: boolean
    document.write(!!x + "<br>"); // Ispisuje: true
    
    var x = "Hello World!";
    var y = +x;
    document.write(typeof(y) + "<br>");// Ispisuje: number
    document.write(y + "<br>"); // Ispisuje: NaN
    </script>
</body>
</html>

Nadamo se da ste razumjeli osnove pretvaranja tipova podataka. Molimo pogledajte lekciju JavaScript tipovima podataka da biste saznali više o različitim tipovima podataka koji su dostupni u JavaScriptu.