JavaScript - Brojevi

Rad sa brojevima

JavaScript podržava i cijele brojeve i brojeve s pomičnim zarezom koji se mogu predstaviti u decimalnim, heksadecimalnim ili oktalnim notacijama. Za razliku od drugih jezika, JavaScript ne tretira različite brojeve i brojeve s pomičnim zarezom različito. Svi brojevi u JavaScript predstavljeni su kao brojevi sa zarezom. Evo primjera koji pokazuje brojeve u različitim formatima: 

var x = 2;     // integer broj
var y = 3.14;  // floating-point broj
var z = 0xff;  // hexadecimal broj
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Brojevi</title>
</head>
<body>
    <script>
    // Kreiranje varijabli
    var x = 2;     // integer broj
    var y = 3.14;  // floating-point broj
    var z = 0xff;  // hexadecimal broj
    
    // Ispisivanje vrijednosti varijabli
    document.write(x + "<br>");
    document.write(y + "<br>");
    document.write(z);
    </script>
</body>
</html>

Izuzetno veliki broj može se prikazati eksponencijalnom notacijom, npr. 6.02e + 23 (isto kao 6.02x10 na 23-eću). 

var x = 1.57e4;  // isto kao 15700
var y = 4.25e+6;  // isto kao 4.25e6 ili 4250000
var z = 4.25e-6;  // isto kao 0.00000425

Brojevi mogu biti predstavljeni i u heksadecimalnoj notaciji (baza 16). Heksadecimalni brojevi su sa prefiksom 0x. Obično se koriste za predstavljanje boja. Pogledajmo primjer: 

var x = 0xff;  // isto kao 255
var y = 0xb4;  // isto kao 180
var z = 0x00;  // isto kao 0

Uticaj na brojeve i stringove

Kao što znate iz prethodnih lekcija, operator + koristi se i za dodavanje i za pridruživanje. Dakle, izvođenje matematičkih operacija na brojevima i stringovima može dati zanimljive rezultate. Sljedeći primjer će vam pokazati šta se događa kada dodate brojeve i stringove: 

var x = 10;
var y = 20;
var z = "30";

// Ako broju dodate broj, rezultat će biti zbir brojeva
console.log(x + y); // 30

// Dodavanjem stringa stringu, rezultat će biti spajanje stringa
console.log(z + z); // '3030'

// Dodavanje broja stringu, rezultat će biti spajanje stringa
console.log(x + z); // '1030'

// Dodavanjem stringa s brojem, rezultat će biti spajanje stringova
console.log(z + x); // '3010'

// Ako dodate string s brojem, rezultat će biti pridruživanje stringa
console.log("Rezultat je: " + x + y); // 'Rezultat je: 1020'

// Dodavanje brojeva i stringova, proračunava se s lijeva na desno
console.log(x + y + z); // 'Rezultat je: 3030'
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje brojeva i stringova</title>
</head>
<body>
    <script>
    // Kreiranje varrijable
    var x = 10;
    var y = 20;
    var z = "30";
    
    // Dodavanje broja s brojem rezultovaće zbiru brojeva
    document.write(x + y); // 30
    document.write("<br>");
    
    // Dodavanjem stringa sa stringom, rezultovaće spajanjem stringova
    document.write(z + z); // '3030'
    document.write("<br>");
    
    // Dodavanjem broja stringu, rezultovaće spajanje stringova
    document.write(x + z); // '1030'
    document.write("<br>");
    
    // Dodavanjem stringa s brojem rezultovaće spajanje stringova
    document.write(z + x); // '3010'
    document.write("<br>");
    
    // Dodavanjem stringova i brojeva rezultovaće spajanje stringova
    document.write("Rezultat je: " + x + y); // 'Rezultat je: 1020'
    document.write("<br>");
    
    // Dodavanje brojeva i stringova, proračun će biti izveden slijeva udesno
    document.write(x + y + z); // 'Rezultat je: 3030'
    </script>
</body>
</html>

Ako pažljivo promatrate prethodni primjer, vidjećete da rezultat posljednje operacije nije samo jednostavno pridruživanje stringa, jer se operateri sa istim prioritetom ocjenjuju s lijeva na desno. Zbog toga, s obzirom da su varijable x i y brojevi, prvo se dodaju, a rezultat se spaja sa varijablom z koja je string, zbog toga je konačni rezultat 30 + "30" = "3030".

Ali, ako izvodite druge matematičke operacije poput množenja, dijeljenja ili oduzimanja, rezultat će biti drugačiji. JavaScript će automatski pretvoriti numeričke stringove (tj. stringove koji sadrže numeričke vrijednosti) u brojeve u svim numeričkim operacijama, kao što je prikazano u sljedećem primjeru: 

var x = 10;
var y = 20;
var z = "30";

// Oduzimanje broja od broja
console.log(y - x); // 10

// Oduzimanje broja od numeričkog stringa
console.log(z - x); // 20

// Množavanje broja numeričkim stringom
console.log(x * z); // 300

// Djeljenje broja numeričkim stringom
console.log(z / x); // 3
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Automatska konverzija numeričkih stringova u brojeve</title>
</head>
<body>
    <script>
    // Kreiranje varijabli
    var x = 10;
    var y = 20;
    var z = "30";
    
    // Oduzimanje broja od broja
    document.write(y - x); // 10
    document.write("<br>");
    
    // Oduzimanje broja iz numeričkog stringa
    document.write(z - x); // 20
    document.write("<br>");
    
    // Množenje broja numeričkim stringom
    document.write(x * z); // 300
    document.write("<br>");
    
    // Dijeljenje broja numeričkim stringom
    document.write(z / x); // 3
    </script>
</body>
</html>

Ukoliko pokušate pomnožiti ili podijeliti brojeve sa stringovima koji nisu numerički, vraća se NaN (nije broj). Takođe, ako koristite NaN u matematičkoj operaciji, rezultat će biti NaN. 

var x = 10;
var y = "foo";
var z = NaN;

// Oduzimanje broja iz ne numeričkog stringa
console.log(y - x); // NaN

// Množenje broja iz ne numeričkog stringa
console.log(x * y); // NaN

// Djeljenje broja iz ne numeričkog stringa
console.log(x / y); // NaN

// Dodavanje NaN broju
console.log(x + z); // NaN
            
// Dodavanje NaN stringu
console.log(y + z); // fooNaN

Beskonačnost

Beskonačnost predstavlja broj preveliki da bi JavaScript mogala rukovati s njim. JavaScript ima posebne ključne riječi Infinity i -Infinity, koje predstavljaju pozitivnu i negativnu beskonačnost. Na primjer, broj dijeljenje sa 0 vraća beskonačnost, kao što je prikazano u sljdećem primjeru: 

var x = 5 / 0;
console.log(x); // Beskonačno

var y = -5 / 0;
console.log(y); // -Beskonačno
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Predstavljanje beskonačnosti</title>
</head>
<body>
    <script>
    var x = 5 / 0;
    document.write(x + "<br>"); // Infinity
    
    var y = -5 / 0;
    document.write(y); // -Infinity
    </script>
</body>
</html>

Izbjegavanje problema sa preciznošću

Ponekad operacije na brojevima s decimalnim zarezom daju neočekivane rezultate, kao što je prikazano u sljedećem primjeru: 

var x = 0.1 + 0.2;
console.log(x) // 0.30000000000000004

Kao što možete vidjeti, rezultat je 0.30000000000000004, a ne očekivani 0.3. Ta se razlika naziva greškom zaokruživanja. To se događa zato što JavaScript i mnogi drugi jezici koriste binarni (osnovni 2) obrazac za interno predstavljanje decimalnih (baznih 10) brojeva. Nažalost, većina decimalnih brojeva ne može se predstaviti tačno u binarnom obliku, tako da se javljaju male razlike. Da biste izbjegli ovaj problem, možete koristiti rješenje poput ovoga: 

var x = (0.1 * 10 + 0.2 * 10) / 10;
console.log(x) // 0.3
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Ispravljanje greške zaokruživanja broja</title>
</head>
<body>
    <script>
    var x = (0.1 * 10 + 0.2 * 10) / 10;
    document.write(x) // 0.3
    </script>
</body>
</html>

JavaScript okrugle brojeve s pomičnim zarezom zaokružuje na 17 decimala, što je u većini slučajeva dovoljna preciznost. Takođe u JavaScript brojevima (brojevi bez frakcijskih dijelova ili eksponencijalne notacije) su tačno i do 15 decimala, kao što je prikazano u sljedećem primjeru: 

var x = 999999999999999;
console.log(x); // 999999999999999

var y = 9999999999999999;
console.log(y); // 10000000000000000
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Problem preciznosti s cijelim brojevima</title>
</head>
<body>
    <script>
    var x = 999999999999999;
    document.write(x + "<br>"); // 999999999999999
    
    var y = 9999999999999999;
    document.write(y); // 10000000000000000
    </script>
</body>
</html>

Izvođenje operacija na brojevima

JavaScript pruža nekoliko svojstava i metoda za izvođenje operacija na brojčanim vrijednostima. Kao što vam je već poznato iz prethodnih lekcija, u JavaScript primitivni tipovi podataka mogu djelovati poput objekata kada im se obratite s notacijom pristupa svojstvu (tj. notacija tačake). U narednim lekcijama razmotrićemo metode brojanja koje se najčešće koriste.


Razčlanivanje cjelih brojeva

Metoda parseInt() može se koristiti za razčlanjivanje cijelog broja iz stringa. Ova metoda je posebno korisna u situacijama kada se bavite vrijednostima poput CSS jedinica, npr. 50px, 12pt itd. i želite iz nje izvući brojčanu vrijednost. Ako metoda parseInt() naiđe na znak koji nije numerički u specifikovanoj bazi, zaustavlja razčlanjivanje i vraća cjelobrojnu vrijednost razčlanjenu do te tačke. Ako se prvi znak ne može pretvoriti u broj, metoda će vratiti NaN (a ne broj). Prostori za vođenje i zaustavljanje su dopušteni. Pogledajmo primjer: 

console.log(parseInt("3.14"));  // 3
console.log(parseInt("50px"));  // 50
console.log(parseInt("12pt"));  // 12
console.log(parseInt("0xFF", 16));  // 255
console.log(parseInt("20 godina"));  // 20
console.log(parseInt("Godina 2048"));  // NaN
console.log(parseInt("10 12 2018"));  // 10
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Analiziranje cijelih brojeve iz stringa</title>
</head>
<body>
    <script>
    document.write(parseInt("3.14") + "<br>");  // 3
    document.write(parseInt("50px") + "<br>");  // 50
    document.write(parseInt("12pt") + "<br>");  // 12
    document.write(parseInt("0xFF", 16) + "<br>");  // 255
    document.write(parseInt("20 godina") + "<br>");  // 20
    document.write(parseInt("Godina 2048") + "<br>");  // NaN
    document.write(parseInt("10 12 2018"));  // 10
    </script>
</body>
</html>

Slično tome, možete koristiti parseFloat() metodu za razčlanjivanje broja s pomičnim zarezom iz stringom. Metoda parseFloat() djeluje na isti način kao i metoda parseInt(), osim što dohvata i cijele i decimalnim brojeve. 

console.log(parseFloat("3.14"));  // 3.14
console.log(parseFloat("50px"));  // 50
console.log(parseFloat("1.6em"));  // 1.6
console.log(parseFloat("124.5 lbs"));  // 124.5
console.log(parseFloat("Težina 124.5 lbs"));  // NaN
console.log(parseFloat("6.5 acres"));  // 6.5
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Razčlanivanje brojeva sa pomičnim zarezom iz stringa</title>
</head>
<body>
    <script>
    document.write(parseFloat("3.14") + "<br>");  // 3.14
    document.write(parseFloat("50px") + "<br>");  // 50
    document.write(parseFloat("1.6em") + "<br>");  // 1.6
    document.write(parseFloat("124.5 lbs") + "<br>");  // 124.5
    document.write(parseFloat("Težina 124.5 lbs") + "<br>");  // NaN
    document.write(parseFloat("6.5 acres"));  // 6.5
    </script>
</body>
</html>

Pretvaranje brojeva u stringove

Metoda toString() se može koristiti za pretvaranje broja u njegov ekvivalent string. Ova metoda po izboru prihvata cijeli broj u rasponu od 2 do 36, specifikujući bazu koja će se koristiti za predstavljanje numeričkih vrijednosti. Pogledajmo primjer: 

var x = 10;
var y = x.toString();
console.log(y);  // '10'
console.log(typeof y);  // string
console.log(typeof x);  // broj

console.log((12).toString());  // '12'
console.log((15.6).toString());  // '15.6'
console.log((6).toString(2));  // '110'
console.log((255).toString(16));  // 'ff'
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Pretvaranje brojeva u stringove</title>
</head>
<body>
    <script>
    var x = 10;
    var y = x.toString();
    document.write(y);  // '10'
    document.write(typeof y + "<br>");  // string
    document.write(typeof x + "<br>");  // number
    
    document.write((12).toString() + "<br>");  // '12'
    document.write((15.6).toString() + "<br>");  // '15.6'
    document.write((6).toString(2) + "<br>");  // '110'
    document.write((255).toString(16));  // 'ff'
    </script>
</body>
</html>

Formatiranje brojeva u eksponencijalnom zapisu

Možete koristiti metodu toExponential() za formatiranje ili predstavljanje broja u eksponencijalnom zapisu. Ova metoda po izboru prihvata cijeli broj koji određuje broj cifara nakon decimalne tačke. Takođe, vraćena vrijednost je string, a ne broj. Pogledajmo primjer: 

var x = 67.1234;

console.log(x.toExponential());  // 6.71234e+1
console.log(x.toExponential(6));  // 6.712340e+1
console.log(x.toExponential(4));  // 6.7123e+1
console.log(x.toExponential(2));  // 6.71e+1
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Formatiranje broja u eksponencijalnom zapisu</title>
</head>
<body>
    <script>
    var x = 67.1234;

    document.write(x.toExponential() + "<br>");  // 6.71234e+1
    document.write(x.toExponential(6) + "<br>");  // 6.712340e+1
    document.write(x.toExponential(4) + "<br>");  // 6.7123e+1
    document.write(x.toExponential(2));  // 6.71e+1
    </script>
</body>
</html>

Formatiranje brojeva u fiksne decimale

Možete koristiti metodu toFixed() kada želite formatirati broj s fiksnim brojem s desne strane od decimalne tačke. Vrijednost koja se vraća ovom metodom je string i ima tačno određen broj cifara nakon decimalne tačke. Ako parametar cifara nije naveden ili izostavljen, tretira se kao 0. Pogledajmo primjer: 

var x = 72.635;

console.log(x.toFixed());  // '73' (imajte na umu zaokruživanje, bez frakcijskog dijela)
console.log(x.toFixed(2));  // '72.64' (zaokruživanje)
console.log(x.toFixed(1));  // '72.6'

var y = 6.25e+5;
console.log(y.toFixed(2)); // '625000.00'

var z = 1.58e-4;
console.log(z.toFixed(2));  // '0.00' (jer je 1.58e-4 jednak 0.000158)
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Formatiranje brojeve na fiksna decimalna mjesta</title>
</head>
<body>
    <script>
    var x = 72.635;
    
    document.write(x.toFixed() + "<br>");  // '73' (zaokruživanje, bez razlomka)
    document.write(x.toFixed(2) + "<br>");  // '72.64'
    document.write(x.toFixed(1) + "<br>");  // '72.6'
    
    var y = 6.25e+5;
    document.write(y.toFixed(2) + "<br>"); // '625000.00'
    
    var z = 1.58e-4;
    document.write(z.toFixed(2));  // '0.00' ( jer je 1.58e-4 jedna 0.000158)
    </script>
</body>
</html>

Precizno formatiranje brojeva

Ako želite najprikladniji oblik broja, možete koristiti metodu toPrecision(). Ova metoda vraća string koji predstavlja broj do zadane preciznosti. Ako je preciznost dovoljno velika da uključuje sve cifre cijelog dijela broja, tada se broj formatira koristeći notaciju sa fiksnom tačkom. U suprotnom, broj se formatira eksponencijalnom notacijom. Parametar preciznosti nije obavezan. Pogledajmo primjer: 

var x = 6.235;

console.log(x.toPrecision());  // '6.235'
console.log(x.toPrecision(3));  // '6.24' (zaokruživanje)
console.log(x.toPrecision(2));  // '6.2'
console.log(x.toPrecision(1));  // '6'

var y = 47.63;
console.log(y.toPrecision(2)); // '48' (zaokruživanje, bez frakcijskog dijela)

var z = 1234.5;
console.log(z.toPrecision(2));  // '1.2e+3'
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Precizno formatiranje brojeve</title>
</head>
<body>
    <script>
    var x = 6.235;

    document.write(x.toPrecision() + "<br>");  // '6.235'
    document.write(x.toPrecision(3) + "<br>");  // '6.24' (zaokruživanje)
    document.write(x.toPrecision(2) + "<br>");  // '6.2'
    document.write(x.toPrecision(1) + "<br>");  // '6'
    
    var y = 47.63;
    document.write(y.toPrecision(2) + "<br>"); // '48' (zaokruživanje, bez frakcijskog dijela)
    
    var z = 1234.5;
    document.write(z.toPrecision(2));  // '1.2e+3'
    </script>
</body>
</html>

Pronalaženje najvećih i najmanjih mogućih brojeva

Objekt Number takođe ima nekoliko svojstava povezanih s njim. Svojstva Number.MAX_VALUE i Number.MIN_VALUE objekta Number predstavljaju najveći i najmanji (najbliži nuli, ne najnegativniji) mogući pozitivan broj koji JavaScript može obraditi. Oni su konstante i njihove stvarne vrijednosti su: 1,7976931348623157e + 308, odnosno 5e-324. Broj koji nadilazi opseg mogućih brojeva predstavljen je kao Number.POSITIVE_INFINITY ili Number.NEGATIVE_INFINITY. Pogledajmo primjer: 

var a = Number.MAX_VALUE;
console.log(a); // 1.7976931348623157e+308

var b = Number.MIN_VALUE;
console.log(b); // 5e-324

var x = Number.MAX_VALUE * 2;
console.log(x); // Beskonačno

var y = -1 * Number.MAX_VALUE * 2;
console.log(y); // -Beskonačno
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Najveći i najmanji mogući brojevi</title>
</head>
<body>
    <script>
    var a = Number.MAX_VALUE;
    document.write(a + "<br>"); // 1.7976931348623157e+308
    
    var b = Number.MIN_VALUE;
    document.write(b + "<br>"); // 5e-324
    
    var x = Number.MAX_VALUE * 2;
    document.write(x + "<br>"); // Infinity
    
    var y = -1 * Number.MAX_VALUE * 2;
    document.write(y); // -Infinity
    </script>
</body>
</html>