Șabloane de șiruri

Șabloanele de șiruri (template strings / template literals) permit inserarea într-un șir a diferitelor valori. Această tehnică mai este cunoscută și sub numele de interpolare. Pentru a realiza acest lucru, șirurile sunt delimitate de ghilimele inversate, iar valoarea de inserat este precedată de simbolul $ și este închisă între acolade:

const name = "Tom";
const hello = `Hello ${name}`;
console.log(hello);     // Hello Tom

Aici, în locul ${name}, va fi inserată valoarea constantei name. Astfel, din șablonul `Hello ${name}`, vom obține șirul Hello Tom.

Similar, într-un șir se pot insera simultan mai multe valori:

const name = "Tom";
const age = 37;
const userInfo = `${name} is ${age} years old`;
console.log(userInfo);      // Tom is 37 years old

De asemenea, în locul valorilor scalare pot fi adăugate proprietăți ale obiectelor complexe:

const tom ={
   name: "Tom",
   age: 22
}
const tomInfo = `${tom.name} is ${tom.age} years old`;
console.log(tomInfo);       // Tom is 22 years old

Sau poți insera expresii calculate mai complexe:

function sum(x, y){
   return x + y;
}
const a = 5;
const b = 4;

const result = `${a} + ${b} = ${sum(a, b)}`;
console.log(result);    // 5 + 4 = 9


const expression = `${a} * ${b} = ${ a * b}`;
console.log(expression);    // 5 * 4 = 20

În primul caz, în șablon se apelează funcția sum(), iar valorile constante a și b sunt transmise ca parametri: ${sum(a, b)}. În final, suma dintre a și b va fi inserată în acest loc.

În al doilea caz, în șablon se efectuează operația de înmulțire a constantelor: ${ a * b}.

Codul HTML în șabloane

Șabloanele pot, de asemenea, să stocheze cod HTML, care va fi format dinamic.

Șabloane înglobate

Să examinăm un alt exemplu - vom crea o listă HTML din elementele unui array:

În acest caz, avem de-a face cu un șablon înglobat. Cu alte cuvinte, mai întâi este definit un șablon extern comun:

const markup = `<ul>
   ${.............}
</ul>`;

Și în expresia formată dinamic se aplică încă un șablon:

${people.map(person => `<li>${person.name}</li>`)}

În acest caz, funcția map() este apelată pentru array-ul people, care definește o acțiune pentru fiecare element al array-ului. Această acțiune este transmisă în map() sub forma unei funcții. Aici, în scopul simplificării, este utilizată o expresie lambda în calitate de funcție. Aceasta primește fiecare element al array-ului prin parametrul person și formează pentru el șablonul de șir `<li>${person.name}</li>`.

Funcțiile de etichetă și transmiterea șablonului de șir către funcție

JavaScript permite transmiterea unui șablon de șir către o funcție, nu doar ca pe un simplu șir, ci și cu toate fragmentele sale calculate dinamic sub formă de parametri separați. Pentru acest lucru sunt folosite funcțiile de etichetă (tag functions). O astfel de posibilitate poate fi aplicată, de exemplu, pentru preprocesarea șabloanelor și a valorilor lor. Vom analiza următorul exemplu:

const person = "Tom";

function check (parts, name){
   console.log(parts);
   return parts[0] + name + parts[1];
}
const checkedTemplate = check`Person: ${person}.`;
console.log(checkedTemplate);

Aici este definită funcția de etichetă check(), care are doi parametri: parts și name.

function check (parts, name){
   console.log(parts);
   return parts[0] + name + parts[1];
}

Parametrul parts este un array de părți ale șablonului, separate de fragmentele dinamice de inserat. Al doilea parametru - name - reprezintă un fragment dinamic calculat al șablonului. Cu alte cuvinte, în acest caz, presupunem că șablonul de șir, care este transmis funcției check(), va avea doar un fragment dinamic de calculat.

Prin urmare, în array-ul parts vor exista două elemente: partea statică a șablonului, care apare înaintea fragmentului dinamic, și partea șablonului care apare după.

Pentru a face mai clar despre ce merge vorba, afișăm aceste elemente ale array-ului parts în consolă.

Funcția returnează return parts[0] + name + parts[1], adică esențial, returnăm șablonul format anterior, fără a face nicio modificare.

Observați cum transmitem acestui funcției șablonul:

const checkedTemplate = check`Person: ${person}.`;

Șablonul este pur și simplu indicat după numele funcției. Altfel spus, funcția de etichetă este indicată ca prefix înaintea șablonului.

Rezultatul programului:

Array(2)
        0: "Person: "
        1: "."
        length: 2
        raw: (2) ['Person: ', '.']
        Prototype: Array(0)
Person: Tom.

Din afișajul consolei, vedem că elementele array-ului parts sunt subșirurile "Person: " și ".". Valoarea parametrului name este șirul "Tom". Merită de menționat că chiar dacă nu ar exista niciun caracter după fragmentul dinamic calculat (de exemplu, \`Person: ${person}\`), array-ul parts ar avea totuși două elemente, cu a doua fiind un șir gol.

În exemplul anterior, pur și simplu am returnat același conținut care a fost format pe baza șablonului. Cu toate acestea, putem efectua o anumită prelucrare:

const tom = "Tom";
const admin = "Admin";

function check(parts, name) {
   if (name === "Admin") return "Utilizatorul nu este definit";
   else return parts[0] + name + parts[1];
}
let checkedTemplate1 = check`Utilizator: ${tom}`;
let checkedTemplate2 = check`Utilizator: ${admin}`;

console.log(checkedTemplate1);
console.log(checkedTemplate2);

În acest caz, dacă în șablon este transmisă valoarea "Admin", atunci returnăm un rezultat, altfel returnăm ceea ce ar fi fost format pe baza șablonului.

Utilizator: Tom
Utilizatorul nu este definit

Similar, se poate trata șabloanele cu un număr mai mare de fragmente calculate dinamic:

const tom = { name: "Tom", age: 37 };
const bob = { name: "Bob", age: 11 };

function check(parts, name, age) {
   if (age > 18) return `${parts[0]}${name}. Acces deschis`;
   else return `Pentru utilizatorul ${name} accesul este restricționat. Vârsta ${age} nu este validă`;
}
let checkedTemplate1 = check`Utilizator: ${tom.name} ${tom.age}`;
let checkedTemplate2 = check`Utilizator: ${bob.name} ${bob.age}`;

console.log(checkedTemplate1);
console.log(checkedTemplate2);

În acest caz, șablonul conține două fragmente calculate dinamic. Prin urmare, array-ul parts va avea trei elemente.

În funcția check(), în funcție de valoarea celui de-al doilea fragment dinamic calculat (presupunând că este vârsta condițională a utilizatorului), returnăm una sau alta valoare.

Utilizator: Tom. Acces deschis
Pentru utilizatorul Bob accesul este restricționat. Vârsta 11 nu este validă