JavaScript & ES6 - Template Literali


Šta su Template Literali?

Literali prijedloga pružaju jednostavan i čist način stvaranja višerednih stringova i izvođenja interpolacije stringova. Sada možemo ugraditi varijable ili izraze u string na bilo kojem mjestu bez ikakvog problema. Literali prijedloga kreiraju se pomoću znaka back-tick (` `) (grobni naglasak) umjesto uobičajenih dvostrukih ili pojedinačnih navodnika. Varijable ili izrazi mogu se smjestiti unutar stringa koristeći sintaksu ${...}. Uporedite sljedeće primjere i pogledajte koliko je to korisno:

// Jednostavni višeredni string
let str = `Brza smeđa lisica
     preskače lijenog psa.`;

// String s ugrađenim varijablama i izrazom
let a = 10;
let b = 20;
let result = `Zbir ${a} i ${b} je ${a+b}.`;
console.log(result); // Zbir 10 i 20 je 30.
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Template Literals</title>
</head>
<body>
    <script>
    // Jednostavni višeredni string
    let str = `Brza smeđa lisica
         preskače lijenog psa.`;
    
    document.write(`<pre>${str}</pre>`);
    
    // String s ugrađenim varijablama i izrazom
    let a = 10;
    let b = 20;
    let result = `Zbir ${a} i ${b} je ${a+b}.`;
    document.write(result); // Zbir 10 i 20 je 30.
    </script>
</body>
</html>

Da bismo to postigli u ES5, morali smo napisati nešto ovako:

// Jednostavni višeredni string
var str = 'Brza smeđa lisica
     preskače lijenog psa.';

// Stvaranje niza pomoću varijabli i izraza
var a = 10;
var b = 20;
var result = 'Zbir ' + a + ' i ' + b + ' je ' + (a+b) + '.';
console.log(result); // Zbir 10 i 20 je 30.
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Stvaranje višerednih stringova u starijim verzijama JavaScript-a</title>
</head>
<body>
    <script>
    // String s više linija
    var str = 'Brza smeđa lisica\n\t'
        + 'preskače lijenog psa.';
        
    document.write("<pre>" + str + "</pre>");
    
    // Stvaranje niza pomoću varijabli i izraza
    var a = 10;
    var b = 20;
    var result = 'Zbir ' + a + ' i ' + b + ' je ' + (a+b) + '.';
    document.write(result); // Zbir 10 i 20 je 30.
    </script>
</body>
</html>