Jak formátujete řetězec v JavaScriptu?

V JavaScriptu je řetězec skupinou znaků uzavřených buď do jednoduchých nebo dvojitých uvozovek. Existuje mnoho způsobů, jak formátovat řetězce v JavaScriptu.

Ke kombinaci řetězců můžete použít specifické metody nebo operátory. Můžete dokonce provádět konkrétní operace a rozhodnout, jaký řetězec se kde a kdy objeví.

Naučte se formátovat řetězce JavaScriptu pomocí metod zřetězení a šablonových literálů.

Zřetězení řetězců

JavaScript vám umožňuje zřetězit řetězce pomocí několika přístupů. Užitečným přístupem je spojit() metoda. Tato metoda používá dva nebo více řetězců. Používá jeden volací řetězec a jako argumenty bere jeden nebo více řetězců.

const jméno = "John";
const příjmení = "Srna";
nechat stringVal;

instagram viewer
stringVal = jmeno.concat("", příjmení);
řídicí panel.log (stringVal);

Concat zde spojuje argumenty řetězce (prázdné místo a příjmení) s volajícím řetězcem (jméno). Kód pak uloží výsledný nový řetězec do proměnné (stringVal) a vypíše novou hodnotu do konzole prohlížeče:

Dalším způsobem zřetězení kolekce řetězců je použití operátoru plus. Tato metoda umožňuje kombinovat řetězcové proměnné a řetězcové literály a vytvářet nové řetězce.

const jméno = "John";
const middleName = "Mike";
const příjmení = "Srna";
nechat stringVal;
stringVal = jméno + "" + prostřední jméno + "" + příjmení;
řídicí panel.log (stringVal);

Výše uvedený kód vytiskne do konzole následující výstup:

Třetí přístup ke zřetězení řetězců JavaScriptu vyžaduje použití znaménka plus a rovnítka. Tato metoda umožňuje přidat nový řetězec na konec existujícího.

const jméno = "John";
const příjmení = "Srna";
nechat stringVal;
stringVal = jmeno;
stringVal += "";
stringVal += prijmeni;
řídicí panel.log (stringVal);

Tento kód připojí k proměnné firstName mezeru a hodnotu proměnné lastName a vytvoří následující výstup:

Doslovy šablony

Šablonové literály jsou funkcí ES6, která umožňuje formátovat řetězce JavaScriptu. Šablonový literál používá k zobrazení řetězců dvojici zpětných znamének (`). Tato metoda formátování řetězců umožňuje zobrazit čistší víceřádkové řetězce v JavaScriptu.

nechat html;
html = `<ul>
<li> Jméno: John Doe </li>
<li> Věk: 24 </li>
<li> Práce: softwarový inženýr </li>
</ul>`;
dokument.body.innerHTML = html;

Výše uvedený kód JavaScript využívá HTML pro tisk seznamu tří položek v prohlížeči:

Chcete-li dosáhnout stejného výstupu bez šablonových literálů (nebo před šablonovými literály), budete muset použít uvozovky. Nebyli byste však schopni rozšířit kód na více řádků, jak je to možné s literály šablony.

nechat html;
html = "<ul><li>Jméno: John Doe</li><li>Věk: 24</li><li>Práce: softwarový inženýr</li></ul>";
dokument.body.innerHTML = html;

Řetězcová interpolace

Šablonové literály umožňují používat výrazy v řetězcích JavaScriptu prostřednictvím procesu zvaného interpolace. Pomocí řetězcové interpolace můžete do řetězců vkládat výrazy nebo proměnné pomocí ${expression} zástupný symbol. Zde je hodnota literálů šablon JavaScriptu skutečně zřejmá.

nech userName = "Jane Doe";
nechat věk = 21;
nechat práci = "Web Developer";
nechat zkušenost = 3;
nechat html;
html = `<ul>
<li> Jméno: ${userName} </li>
<li> Věk: ${age} </li>
<li> Pracovní pozice: ${job} </li>
<li> Roky zkušeností: ${experience} </li>
<li> Úroveň vývojáře: ${experience < 5? "Junior až středně pokročilý": "Senior"} </li>
</ul>`;
dokument.body.innerHTML = html;

Výše uvedený kód vytváří v konzole následující výstup:

První čtyři argumenty ${expression} zástupný symbol jsou řetězcové proměnné, ale pátý je podmíněný výraz. Výraz se opírá o hodnotu jedné z proměnných (zkušenost), která určuje, co se má zobrazit v prohlížeči.

Formátování prvků na vaší webové stránce pomocí JavaScriptu

Kromě funkčního spojení s vývojem webových stránek spolupracuje JavaScript s HTML, aby ovlivnil design a rozvržení webové stránky. Může manipulovat s textem, který se objeví na webové stránce, jako je tomu u šablonových literálů.

Dokáže dokonce převést HTML na obrázky a zobrazit je na webové stránce.