Adăugarea literelor șablon în ECMAScript 6 (ES6) ne permite să interpolari șiruri în JavaScript.

În cuvinte mai simple, putem folosi substituenți pentru a injecta variabile într-un șir. Puteți vedea un exemplu de interpolare de șiruri folosind literele șablonului în fragmentul de mai jos:

const age = 4.5;
const earthAge = `Earth is estimated to be ${age} billion years old.`;

console.log(earthAge);

În primul rând, veți vedea că folosim backticks pentru literele șablonului. Pe lângă asta, avem și formatul ${placeholder}, care ne permite să inserăm o valoare dinamică în șir. Orice din interior ${} este evaluat ca JavaScript.

De exemplu, am putea scrie Earth is estimated to be ${age + 10} billion years old.și ar funcționa ca și cum am face-o const age = 4.5 + 10;.

Cum am făcut-o înainte?

Înainte de literele șablonului, am fi făcut-o astfel:

const earthAge = "Earth is estimated to be " + age + " billion years old.";

După cum puteți vedea, avem deja o mulțime de citate pentru un șir simplu. Imaginați-vă că trebuie să inserăm o mână de variabile. Se poate transforma rapid într-un șir complex care nu este foarte ușor de citit. Astfel, literele șablon fac șirurile mai curate și mai lizibile.

Cu toate acestea, acesta este doar un caz. Să vedem mai multe cazuri de utilizare pentru literalele șablonului.

Șiruri multi-linie

O altă utilizare la îndemână a șirurilor șablon este șirurile cu mai multe linii. Înainte de literele șablon, am folosit n pentru linii noi, ca în console.log('line 1n' + 'line 2').

Pentru două rânduri, ar putea fi bine. Dar imaginați-vă că vrem cinci rânduri. Din nou, șirul devine inutil de complex.

const earthAge = `Earth is estimated to be ${age} billion years old.

Scientists have scoured the Earth searching for the oldest rocks to radiometrically date.

In northwestern Canada, they discovered rocks about 4.03 billion years old.
`;

Fragmentul de mai sus demonstrează încă o dată cât de simplu și de curat devine scrierea șirurilor cu mai multe linii cu literele șablonului.

Ca exercițiu, încercați să convertiți șirul de mai sus pentru a utiliza concatenarea și linia nouă n.

Expresii

Cu literalele șablonului, putem folosi și expresii în șiruri. Ce inseamna asta?

De exemplu, am putea folosi expresii matematice cum ar fi multiplicarea a două numere. Fragmentul de mai jos ilustrează:

const firstNumber = 10;
const secondNumber = 39;
const result = `The result of multiplying ${firstNumber} by ${secondNumber} is ${firstNumber * secondNumber}.`;

console.log(result);

Fără litere șablon, ar trebui să facem așa ceva:

const result = "The result of multiplying " + firstNumber + " by " + secondNumber + " is " + firstNumber * secondNumber + ".";

Scrierea unui șir ca cele de mai sus poate deveni rapid complexă și confuză. După cum continuăm să vedem, literele șablonului fac mai ușor și mai elegant încorporarea expresiilor în șir.

Operator ternar

Cu interpolarea șirului, putem folosi chiar și un operator ternar în interiorul unui șir. Acest lucru ne permite să verificăm valoarea unei variabile și să afișăm diferite lucruri în funcție de acea valoare.

Să vedem exemplul de mai jos:

const drinks = 4.99;
const food = 6.65;
const total = drinks + food;

const result = `The total bill is ${total}. ${total > 10 ? `Your card payment will be declined` : `Your card payment will be accepted`}.`

console.log(result);

În exemplul de mai sus, verificăm dacă suma totală este mai mare de zece dolari, de exemplu.

Dacă suma este mai mare de zece, îi informăm utilizatorul că plata cu cardul va fi refuzată. În caz contrar, plata cu cardul este acceptată. După cum puteți vedea, interpolarea șirurilor ne permite să facem lucruri interesante cu șiruri.

Concluzie

Adăugarea literelor șablon în ES6 ne permite să scriem șiruri mai bune, mai scurte și mai clare. De asemenea, ne oferă posibilitatea de a injecta variabile și expresii în orice șir. În esență, orice scrieți în parantezele crețate (${}) este tratat ca JavaScript.

Astfel, putem folosi literele șablonului pentru:

  • scrie șiruri cu mai multe linii
  • încorporați expresii
  • scrie șiruri cu operatorul ternar

Dacă îți place ceea ce scriu, sunt șanse să îți placă ceea ce trimit prin e-mail. Vă recomandăm să vă abonați la listă de email-uri. Daca esti nu un fan al buletinelor informative, putem păstra oricând legătura Stare de nervozitate.