Kas ir šablonu literāli un kam tie tiek izmantoti…

Šablonu literāli (template literals), kas arī pazīstami kā šablonu virknes, ir sintakses cukurs JavaScript, kas ļauj ievietot izteiksmes virknes, izmantojot atpakaļskaitļa pēdiņas (``).

Tie tiek izmantoti:

Ērtākai mainīgo un izteiksmju ievietošanai virknes:

const name = "Pasaule";
const greeting = `Sveiki, ${name}!`; // Mainīgā ievietošana
console.log(greeting); // Sveiki, Pasaule!

const sum = 2 + 3;
const result = `Kopā: ${sum}.`; // Izteiksmes ievietošana
console.log(result); // Kopā: 5.

Daudzrindu virkņu izveide bez pārejas simbolu (\n):

const multilineString = `
Šī
ir
daudzrindu
virkne.
`;
console.log(multilineString);

Komplekso virkņu izteikumu veidošana, piemēram, failu ceļi vai SQL vaicājumi, ar labāku lasāmību:

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

Izmantojot zīmētās šablonus (tagged templates) paplašinātai funkcionalitātei: Zīmētie šabloni ļauj izsaukt funkciju ar šablona literālu. Pirmais arguments — virkņu masīvs, bet nākamie — ievietoto izteikumu vērtības:

function highlight(strings, ...values) {
  let str = '';
  strings.forEach((string, i) => {
    str += string;
    if (values[i]) {
      str += `<b>${values[i]}</b>`; // Piemēram, izcelšana ar treknrakstu
    }
  });
  return str;
}

const user = "Frontend";
const role = "izstrādātājs";
const message = highlight`Sveiki, ${user}! Tu - ${role}.`;
console.log(message); // Sveiki, <b>Frontend</b>! Tu - <b>izstrādātājs</b>.

Tādējādi, šablonu literāli padara darbu ar virknes JavaScript daudz elastīgāku, saprotamāku un ļauj izvairīties no sarežģījumiem, kas saistīti ar virknes apvienošanu ar + simbolu.

Kas ir šablonu literāli un kam tie tiek izmantoti?