IT TUTORIJALI | jQuery

JavaScript - Type Conversions

Tip automatskog pretvaranja

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 podatka 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.

Napomena!

U nekim programskim jezicima (poput PHP) string "0" tretira se kao lažan (false), ali u JavaScriptu je ne-prazan string uvijek istinit (true).

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), 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 primijenite matematičke funkcije, na primjer, dodavanje ili oduzimanje datumskih objekata. Pogledajmo primjer:

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>

Napomena!

Konverzija objekta u logičke vrijednosti je beznačajna, jer su svi objekti (uključujući nizove i funkcije) istiniti (true) u logičkom kontekstu. Dakle, postoje samo string i numerička pretvaranja.

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. Pogledajte lekciju JavaScript tipovima podataka da biste saznali više o različitim tipovima podataka koji su dostupni u JavaScript.