Hogyan kell formázni egy karakterláncot JavaScriptben?

A JavaScriptben a karakterlánc karakterek csoportja, amelyeket szimpla vagy kettős idézőjel zár be. A karakterláncok JavaScriptben történő formázására számos mód létezik.

A karakterláncok kombinálásához speciális módszereket vagy operátorokat használhat. Még konkrét műveleteket is végrehajthat annak eldöntésére, hogy melyik karakterlánc hol és mikor jelenjen meg.

Ismerje meg, hogyan formázhatja JavaScript-karakterláncait összefűzési módszerekkel és sablonliterálokkal.

Karakterlánc összefűzése

A JavaScript lehetővé teszi a karakterláncok összefűzését többféle megközelítéssel. Hasznos megközelítés a concat() módszer. Ez a módszer két vagy több karakterláncot használ. Egyetlen hívó karakterláncot használ, és argumentumként egy vagy több karakterláncot vesz fel.

const keresztnév = "János";
const vezetéknév = "Dámvadtehén";
hagyja stringVal;
stringVal = keresztnév.concat("", vezetéknév);
konzol.log (stringVal);

Itt a concat a karakterlánc argumentumokat (üres szóköz és vezetéknév) a hívó karakterlánchoz (firstName) kapcsolja. A kód ezután a kapott új karakterláncot egy változóban (stringVal) tárolja és kiírja az új értéket a böngésző konzolra:

A karakterláncok gyűjteményének egy másik módja a plusz operátor használata. Ez a módszer lehetővé teszi a karakterlánc-változók és a karakterlánc-literálok kombinálását új karakterláncok létrehozásához.

const keresztnév = "János";
const middleName = "Mikrofon";
const vezetéknév = "Dámvadtehén";
hagyja stringVal;
stringVal = keresztnév + "" + MiddleName + "" + vezetéknév;
konzol.log (stringVal);

A fenti kód a következő kimenetet nyomtatja ki a konzolra:

A JavaScript-karakterláncok összekapcsolásának harmadik megközelítése plusz és egyenlőségjel használatát igényli. Ez a módszer lehetővé teszi egy új karakterlánc hozzáadását egy meglévő karakterlánc végéhez.

const keresztnév = "János";
const vezetéknév = "Dámvadtehén";
hagyja stringVal;
stringVal = keresztnév;
stringVal += "";
stringVal += vezetéknév;
konzol.log (stringVal);

Ez a kód egy üres szóközt és a LastName változó értékét fűzi a firstName változóhoz, és a következő kimenetet eredményezi:

Sablon Literals

A sablonliterálok egy ES6 szolgáltatás, amely lehetővé teszi a JavaScript karakterláncok formázását. A sablonliterál egy pár backtick-et (`) használ a karakterláncok megjelenítéséhez. Ez a karakterlánc-formázási módszer lehetővé teszi, hogy tisztább többsoros karakterláncokat jelenítsen meg JavaScriptben.

hagyja html;
html = `<ul>
<li> Név: John Doe </li>
<li> Kor: 24 </li>
<li> Munkakör: szoftvermérnök </li>
</ul>`;
dokumentum.body.innerHTML = html;

A fenti JavaScript kódot használja HTML három elemből álló lista nyomtatásához a böngészőben:

Ahhoz, hogy ugyanazt a kimenetet sablonliterálok nélkül (vagy a sablonliterálok előtt) érje el, idézőjeleket kell használnia. A kódot azonban nem tudja több sorra kiterjeszteni, mint a sablonliteráloknál.

hagyja html;
html = "<ul><li>Név: John Doe</li><li>Kor: 24</li><li>Munkakör: szoftvermérnök</li></ul>";
dokumentum.body.innerHTML = html;

String interpoláció

A sablonliterálok segítségével kifejezéseket használhat a JavaScript-karakterláncokban az interpolációnak nevezett folyamaton keresztül. A karakterlánc-interpolációval kifejezéseket vagy változókat ágyazhat be a karakterláncokba a ${expression} helykitöltő. Itt válik igazán nyilvánvalóvá a JavaScript-sablon literálok értéke.

legyen userName = "Jane Doe";
hagyja kor = 21;
hadd dolgozzon = "Webfejlesztő";
hagyja tapasztalat = 3;
hagyja html;
html = `<ul>
<li> Név: ${userName} </li>
<li> Kor: ${age} </li>
<li> Beosztás: ${job} </li>
<li> Több éves tapasztalat: ${experience} </li>
<li> Fejlesztői szint: ${élmény < 5? "Juniortól Középhaladóig": "Idősebb"} </li>
</ul>`;
dokumentum.body.innerHTML = html;

A fenti kód a következő kimenetet hozza létre a konzolban:

Az első négy érv a ${expression} helyőrző karakterláncváltozók, de az ötödik feltételes kifejezés. A kifejezés az egyik változó értékére (tapasztalat) támaszkodik, hogy megszabja, mit jelenítsen meg a böngészőben.

Weboldalán lévő elemek formázása JavaScript segítségével

A weboldalfejlesztéssel való funkcionális kapcsolaton kívül a JavaScript a HTML-lel együttműködve befolyásolja a weboldal tervezését és elrendezését. Képes manipulálni a weboldalon megjelenő szöveget, akárcsak a sablonliterálok esetében.

Még a HTML-t is képes konvertálni képekké és megjeleníteni egy weboldalon.