Kuidas vormindada stringi JavaScriptis?

JavaScriptis on string märkide rühm, mis on ümbritsetud kas ühe- või kahekordsete jutumärkidega. JavaScriptis on stringide vormindamiseks palju võimalusi.

Stringide kombineerimiseks saate kasutada kindlaid meetodeid või operaatoreid. Saate isegi teha konkreetseid toiminguid, et otsustada, milline string kus ja millal kuvatakse.

Siit saate teada, kuidas vormindada JavaScripti stringe, kasutades konkateneerimismeetodeid ja malliliteraale.

Stringi aheldamine

JavaScript võimaldab teil stringe mitmel viisil ühendada. Kasulik lähenemine on concat () meetod. See meetod kasutab kahte või enamat stringi. See kasutab ühte kutsumistingi ja võtab argumentidena ühe või mitu stringi.

const eesnimi = "John";
const perekonnanimi = "Doe";
lase stringVal;





instagram viewer
stringVal = eesnimi.concat("", perekonnanimi);
konsool.log (stringVal);

Siin ühendab concat stringi argumendid (tühik ja perekonnanimi) kutsuva stringiga (eesnimi). Seejärel salvestab kood saadud uue stringi muutujasse (stringVal) ja prindib uue väärtuse brauseri konsooli:

Teine viis stringide kogumi ühendamiseks on pluss-operaatori kasutamine. See meetod võimaldab uute stringide loomiseks kombineerida stringimuutujaid ja stringiliteraaale.

const eesnimi = "John";
const keskmineNimi = "Mike";
const perekonnanimi = "Doe";
lase stringVal;
stringVal = eesnimi + "" + MiddleName + "" + perekonnanimi;
konsool.log (stringVal);

Ülaltoodud kood prindib konsooli järgmise väljundi:

Kolmas lähenemisviis JavaScripti stringide ühendamiseks nõuab pluss- ja võrdusmärgi kasutamist. See meetod võimaldab lisada uue stringi olemasoleva lõppu.

const eesnimi = "John";
const perekonnanimi = "Doe";
lase stringVal;
stringVal = eesnimi;
stringVal += "";
stringVal += perekonnanimi;
konsool.log (stringVal);

See kood lisab muutujale firstName tühja ruumi ja muutuja perekonnanimi väärtuse, andes järgmise väljundi:

Mall Literaalid

Malli literaalid on ES6 funktsioon, mis võimaldab teil vormindada JavaScripti stringe. Mallliteraal kasutab stringide kuvamiseks täkke (`) paari. See stringivormingu meetod võimaldab teil JavaScriptis kuvada selgemaid mitmerealisi stringe.

lase html;
html = `<ul>
<li> Nimi: John Doe </li>
<li> Vanus: 24 </li>
<li> Amet: Tarkvarainsener </li>
</ul>`;
dokument.body.innerHTML = html;

Kasutatakse ülaltoodud JavaScripti koodi HTML brauseris kolme üksuse loendi printimiseks:

Sama väljundi saavutamiseks ilma malliliteraalideta (või enne malliliteraale), peaksite kasutama jutumärke. Siiski ei saa te koodi mitmele reale laiendada, nagu saate malliliteraalide puhul.

lase html;
html = "<ul><li>Nimi: John Doe</li><li>Vanus: 24</li><li>Amet: Tarkvarainsener</li></ul>";
dokument.body.innerHTML = html;

Stringi interpolatsioon

Malli literaalid võimaldavad teil kasutada JavaScripti stringides avaldisi protsessi, mida nimetatakse interpoleerimiseks. Stringide interpoleerimisega saate oma stringidesse manustada avaldisi või muutujaid, kasutades ${expression} kohatäide. Siin saab JavaScripti malliliteraalide väärtus tõeliselt ilmseks.

lase kasutajanimi = "Jane Doe";
lase vanus = 21;
lase tööle = "Veebiarendaja";
lase kogemus = 3;
lase html;
html = `<ul>
<li> Nimi: ${userName} </li>
<li> Vanus: ${age} </li>
<li> Ametinimetus: ${job} </li>
<li> Aastatepikkune kogemus: ${experience} </li>
<li> Arendaja tase: ${experience < 5? "Juunior kuni kesktasemeni": "Seenior"} </li>
</ul>`;
dokument.body.innerHTML = html;

Ülaltoodud kood annab konsoolis järgmise väljundi:

Esimesed neli argumenti ${expression} kohahoidjad on stringimuutujad, kuid viies on tingimusavaldis. Avaldis tugineb ühe muutuja (kogemuse) väärtusele, et määrata, mida see brauseris kuvama peaks.

Veebilehe elementide vormindamine JavaScriptiga

Lisaks funktsionaalsele seosele veebilehe arendamisega töötab JavaScript koos HTML-iga, et mõjutada veebilehe kujundust ja paigutust. See võib manipuleerida veebilehel kuvatava tekstiga, nagu see on malliliteraalide puhul.

See võib isegi teisendada HTML-i kujutisteks ja kuvada neid veebilehel.