Šta su šablonski literali i zašto se koriste?

Šablonski literali (template literals), takođe poznati kao šablonski stringovi, su sintaktički šećer u JavaScript-u koji omogućava umetanje izraza u stringove koristeći obrnute navodnike (``).

Koriste se za:

1. Prijatniju interpolaciju promenljivih i izraza u stringove:

   const name = "Svet";
   const greeting = `Zdravo, ${name}!`; // Umetanje promenljive
   console.log(greeting); // Zdravo, Svet!
   
   const sum = 2 + 3;
   const result = `Zbir: ${sum}.`; // Umetanje izraza
   console.log(result); // Zbir: 5.
   

2. Kreiranje višelinijskih stringova bez korišćenja karaktera za novi red (\n):

   const multilineString = `
   Ovo
   je
   višelinijski
   string.
   `;
   console.log(multilineString);
   

3. Građenje složenih izraza u stringovima, poput putanja do fajlova ili SQL upita, sa većom čitljivošću:

   const userId = 123;
   const query = `SELECT * FROM users WHERE id = ${userId}`;
   console.log(query);
   

4. Korišćenje označenih šablona (tagged templates) za proširenu funkcionalnost: Označeni šabloni omogućavaju pozivanje funkcije sa šablonskim literalom. Prvi argument funkcije je niz delova stringa, a sledeći argumenti su vrednosti interpoliranih izraza.

   function highlight(strings, ...values) {
     let str = '';
     strings.forEach((string, i) => {
       str += string;
       if (values[i]) {
         str += `<b>${values[i]}</b>`; // Na primer, isticanje podebljano
       }
     });
     return str;
   }
   
   const user = "Frontend";
   const role = "razvijač";
   const message = highlight`Zdravo, ${user}! Ti si ${role}.`;
   console.log(message); // Zdravo, <b>Frontend</b>! Ti si <b>razvijač</b>.
   

Na ovaj način, šablonski literali čine rad sa stringovima u JavaScript-u fleksibilnijim, razumljivijim i omogućavaju izbegavanje složenosti povezane sa konkatenacijom stringova pomoću simbola +.