Ako naformátujete reťazec v JavaScripte?

V JavaScripte je reťazec skupina znakov uzavretá buď v pároch jednoduchých alebo dvojitých úvodzoviek. Existuje mnoho spôsobov, ako formátovať reťazce v JavaScripte.

Na kombinovanie reťazcov môžete použiť špecifické metódy alebo operátory. Môžete dokonca vykonávať špecifické operácie, aby ste rozhodli, ktorý reťazec sa kde a kedy objaví.

Zistite, ako formátovať reťazce JavaScript pomocou metód zreťazenia a literálov šablón.

Spájanie reťazcov

JavaScript vám umožňuje spájať reťazce pomocou niekoľkých prístupov. Užitočný prístup je concat() metóda. Táto metóda používa dva alebo viac reťazcov. Používa jeden volací reťazec a berie jeden alebo viac reťazcov ako argumenty.

const krstné meno = "John";
const priezvisko = "Laň";
nech stringVal;
stringVal = meno.concat("", priezvisko);
konzoly.log (stringVal);

Concat tu spája argumenty reťazca (prázdne miesto a priezvisko) s volajúcim reťazcom (firstName). Kód potom uloží výsledný nový reťazec do premennej (stringVal) a vytlačí novú hodnotu do konzoly prehliadača:

Ďalším spôsobom zreťazenia kolekcie reťazcov je použitie operátora plus. Táto metóda vám umožňuje kombinovať reťazcové premenné a reťazcové literály na vytváranie nových reťazcov.

const krstné meno = "John";
const middleName = "Mike";
const priezvisko = "Laň";
nech stringVal;
stringVal = krstné meno + "" + stredné meno + "" + priezvisko;
konzoly.log (stringVal);

Vyššie uvedený kód vypíše do konzoly nasledujúci výstup:

Tretí prístup k zreťazeniu reťazcov JavaScriptu vyžaduje použitie znamienka plus a rovnosti. Táto metóda vám umožňuje pridať nový reťazec na koniec existujúceho reťazca.

const krstné meno = "John";
const priezvisko = "Laň";
nech stringVal;
stringVal = meno;
stringVal += "";
stringVal += priezvisko;
konzoly.log (stringVal);

Tento kód pripojí prázdnu medzeru a hodnotu premennej lastName k premennej firstName, čím vznikne nasledujúci výstup:

Doslovy šablóny

Šablónové literály sú funkciou ES6, ktorá vám umožňuje formátovať reťazce JavaScriptu. Šablónový literál používa na zobrazenie reťazcov pár backticks (`). Táto metóda formátovania reťazcov vám umožňuje zobraziť čistejšie viacriadkové reťazce v JavaScripte.

nech html;
html = `<ul>
<li> Meno: John Doe </li>
<li> Vek: 24 </li>
<li> Práca: softvérový inžinier </li>
</ul>`;
dokument.body.innerHTML = html;

Vyššie uvedený kód JavaScript využíva HTML ak chcete vytlačiť zoznam troch položiek v prehliadači:

Ak chcete dosiahnuť rovnaký výstup bez literálov šablóny (alebo pred literálmi šablóny), budete musieť použiť úvodzovky. Nebudete však môcť rozšíriť kód do viacerých riadkov, ako je to možné pomocou literálov šablón.

nech html;
html = "<ul><li>Meno: John Doe</li><li>Vek: 24</li><li>Práca: softvérový inžinier</li></ul>";
dokument.body.innerHTML = html;

Stringová interpolácia

Šablónové literály vám umožňujú používať výrazy v reťazcoch JavaScript prostredníctvom procesu nazývaného interpolácia. Pomocou interpolácie reťazcov môžete do reťazcov vložiť výrazy alebo premenné pomocou príkazu ${expression} zástupný symbol. Tu je hodnota literálov šablón JavaScriptu skutočne zrejmá.

nech username = "Jane Doe";
nech vek = 21;
nechať prácu = "Web Developer";
nech skúsenosť = 3;
nech html;
html = `<ul>
<li> Meno: ${userName} </li>
<li> Vek: ${age} </li>
<li> Pracovná pozícia: ${job} </li>
<li> Roky skúseností: ${experience} </li>
<li> Úroveň vývojára: ${experience < 5? "Junior až stredne pokročilý": "Senior"} </li>
</ul>`;
dokument.body.innerHTML = html;

Vyššie uvedený kód vytvára v konzole nasledujúci výstup:

Prvé štyri argumenty ${expression} zástupný symbol sú reťazcové premenné, ale piaty je podmienený výraz. Výraz sa spolieha na hodnotu jednej z premenných (skúsenosť), ktorá diktuje, čo sa má zobraziť v prehliadači.

Formátovanie prvkov na vašej webovej stránke pomocou JavaScriptu

Okrem funkčného spojenia s vývojom webových stránok JavaScript spolupracuje s HTML, aby ovplyvnil dizajn a rozloženie webovej stránky. Môže manipulovať s textom, ktorý sa zobrazuje na webovej stránke, ako je to v prípade literálov šablón.

Dokáže dokonca previesť HTML na obrázky a zobraziť ich na webovej stránke.