Cum formatați un șir în JavaScript?

În JavaScript, un șir este un grup de caractere cuprins fie de o pereche de ghilimele simple, fie duble. Există multe moduri de a formata șiruri în JavaScript.

Puteți utiliza anumite metode sau operatori pentru a combina șiruri. Puteți chiar să efectuați operații specifice pentru a decide ce șir apare unde și când.

Aflați cum să formatați șirurile JavaScript folosind metode de concatenare și literale șablon.

Concatenarea șirurilor

JavaScript vă permite să concatenați șiruri folosind mai multe abordări. O abordare utilă este concat() metodă. Această metodă folosește două sau mai multe șiruri. Folosește un singur șir de apelare și ia unul sau mai multe șiruri ca argumente.

const prenume = "Ioan";
const lastName = "Căprioară";
lăsa stringVal;
stringVal = firstName.concat("", nume);
consolă.log (stringVal);

Aici, concat unește argumentele șirului (un spațiu liber și lastName) la șirul de apelare (firstName). Codul stochează apoi noul șir rezultat într-o variabilă (stringVal) și imprimă noua valoare în consola browserului:

O altă modalitate de a concatena o colecție de șiruri de caractere este utilizarea operatorului plus. Această metodă vă permite să combinați variabile și literale șir pentru a crea șiruri noi.

const prenume = "Ioan";
const middleName = "Mike";
const lastName = "Căprioară";
lăsa stringVal;
stringVal = prenume + "" + Nume de mijloc + "" + Prenume;
consolă.log (stringVal);

Codul de mai sus imprimă următoarea ieșire pe consolă:

O a treia abordare pentru concatenarea șirurilor JavaScript necesită utilizarea unui semn plus și egal. Această metodă vă permite să adăugați un șir nou la sfârșitul unuia existent.

const prenume = "Ioan";
const lastName = "Căprioară";
lăsa stringVal;
stringVal = prenume;
stringVal += "";
stringVal += lastName;
consolă.log (stringVal);

Acest cod adaugă un spațiu liber și valoarea variabilei lastName variabilei firstName, producând următoarea ieșire:

Literale șablon

Literele șablonului sunt o caracteristică ES6 care vă permite să formatați șirurile JavaScript. Un șablon literal folosește o pereche de backtick-uri (`) pentru a afișa șiruri. Această metodă de formatare a șirurilor vă permite să afișați șiruri mai curate de mai multe linii în JavaScript.

lăsa html;
html = `<ul>
<li> Nume: John Doe </li>
<li> Varsta: 24 </li>
<li> Job: Inginer software </li>
</ul>`;
document.body.innerHTML = html;

Codul JavaScript de mai sus utilizează HTML pentru a imprima o listă de trei articole în browser:

Pentru a obține aceeași ieșire fără literale de șablon (sau înainte de literalele de șablon), ar trebui să utilizați ghilimele. Cu toate acestea, nu ați putea extinde codul pe mai multe linii așa cum puteți cu literalele șablon.

lăsa html;
html = "<ul><li>Nume: John Doe</li><li>Varsta: 24</li><li>Job: Inginer software</li></ul>";
document.body.innerHTML = html;

Interpolarea șirurilor

Literale de șablon vă permit să utilizați expresii în șirurile JavaScript printr-un proces numit interpolare. Cu interpolarea șirurilor puteți încorpora expresii sau variabile în șiruri folosind ${expression} substituent. Acesta este locul în care valoarea literalelor șablonului JavaScript devine cu adevărat evidentă.

lasa userName = "femeie necunoscută";
lăsa varsta = 21;
lasa treaba = "Dezvoltator Web";
lăsa experienta = 3;
lăsa html;
html = `<ul>
<li> Nume: ${userName} </li>
<li> Vârsta: ${age} </li>
<li> Titlul postului: ${job} </li>
<li> Ani de experiență: ${experience} </li>
<li> Nivel de dezvoltator: ${experience < 5? "Junior până la Intermediar": "Senior"} </li>
</ul>`;
document.body.innerHTML = html;

Codul de mai sus produce următoarea ieșire în consolă:

Primele patru argumente ale ${expression} substituentul sunt variabile șir, dar a cincea este o expresie condiționată. Expresia se bazează pe valoarea uneia dintre variabile (experiență), pentru a dicta ce ar trebui să afișeze în browser.

Formatarea elementelor de pe pagina dvs. web cu JavaScript

Pe lângă asocierea sa funcțională cu dezvoltarea paginilor web, JavaScript lucrează cu HTML pentru a influența designul și aspectul unei pagini web. Poate manipula textul care apare pe o pagină web, așa cum este cazul literalelor șablon.

Poate chiar converti HTML în imagini și le poate afișa pe o pagină web.