dexblog.ro
JS Toate comenzile JavaScript

template literals în JavaScript

Afișare ES2015 (ES6)

Șiruri între backtick-uri (`) în care pui variabile și expresii direct în text.

Sintaxă 
`text ${expresie} text`

Ce face template literals

Un șir scris între backtick-uri (caracterul `, aflat de obicei sub tasta Esc) se numește template literal. În interiorul lui, orice expresie pusă între ${ } este calculată și înlocuită cu rezultatul.

Template literals pot ocupa mai multe rânduri fără caractere speciale, așa că sunt foarte comode pentru bucăți de HTML sau mesaje lungi.

Ce returnează

Un șir de caractere (string).

Exemple

Exemplul 1: Variabile în text

const nume = "Ana";
const varsta = 25;

console.log(`Mă numesc ${nume} și am ${varsta} de ani.`);

Rezultat

Mă numesc Ana și am 25 de ani.

Exemplul 2: Expresii și calcule

const pret = 49.9;
const bucati = 3;

console.log(`Total: ${(pret * bucati).toFixed(2)} lei`);
console.log(`Stoc: ${bucati > 0 ? "disponibil" : "epuizat"}`);

Rezultat

Total: 149.70 lei
Stoc: disponibil

Exemplul 3: Text pe mai multe rânduri

const produs = "Laptop";
const html = `<div class="produs">
  <h2>${produs}</h2>
</div>`;

console.log(html);

Rezultat

<div class="produs">
  <h2>Laptop</h2>
</div>

Greșeli frecvente

  • Folosești ghilimele obișnuite: "Salut, ${nume}" afișează textul exact așa, cu acolade cu tot. Înlocuirea merge doar între backtick-uri.
  • Pui în HTML texte venite de la utilizator fără să le cureți. Un comentariu care conține <script> ajunge să ruleze în pagină. Folosește textContent pentru texte simple.

Comenzi înrudite

  • console.log: Afișează texte, numere, tablouri sau obiecte în consolă.
  • toFixed: Formatează un număr cu un număr fix de zecimale. Returnează text.
  • textContent / innerHTML: Citește sau schimbă conținutul unui element: ca text simplu sau ca HTML.