Kako formatirate niz v JavaScriptu?

V JavaScriptu je niz skupina znakov, obdanih s parom enojnih ali dvojnih narekovajev. Obstaja veliko načinov za oblikovanje nizov v JavaScriptu.

Za kombiniranje nizov lahko uporabite posebne metode ali operatorje. Izvedete lahko celo posebne operacije, da se odločite, kateri niz se pojavi, kje in kdaj.

Naučite se oblikovati svoje nize JavaScript z metodami veriženja in literali predloge.

Združevanje nizov

JavaScript vam omogoča združevanje nizov z uporabo več pristopov. Koristen pristop je concat() metoda. Ta metoda uporablja dva ali več nizov. Uporablja en sam klicni niz in vzame enega ali več nizov kot argumente.

const firstName = "Janez";
const priimek = "Srna";
pustiti nizVal;
stringVal = firstName.concat("", priimek);
konzola.log (stringVal);

Tukaj concat združi argumente niza (prazen prostor in priimek) klicnemu nizu (firstName). Koda nato shrani nastali nov niz v spremenljivko (stringVal) in natisne novo vrednost v konzolo brskalnika:

Drug način veriženja zbirke nizov je uporaba operatorja plus. Ta metoda vam omogoča kombiniranje nizovnih spremenljivk in nizovnih literalov za ustvarjanje novih nizov.

const firstName = "Janez";
const srednje ime = "Mike";
const priimek = "Srna";
pustiti nizVal;
stringVal = firstName + "" + srednje ime + "" + priimek;
konzola.log (stringVal);

Zgornja koda natisne naslednji izhod v konzolo:

Tretji pristop k veriženju vaših nizov JavaScript zahteva uporabo znaka plus in enačaj. Ta metoda vam omogoča, da dodate nov niz na konec obstoječega.

const firstName = "Janez";
const priimek = "Srna";
pustiti nizVal;
stringVal = firstName;
stringVal += "";
stringVal += priimek;
konzola.log (stringVal);

Ta koda doda prazen prostor in vrednost spremenljivke lastName spremenljivki firstName, kar ustvari naslednji rezultat:

Literali predloge

Literali predloge so funkcija ES6, ki vam omogoča oblikovanje nizov JavaScript. Literal predloge uporablja par povratnih kljukic (`) za prikaz nizov. Ta metoda oblikovanja nizov vam omogoča prikaz čistejših večvrstičnih nizov v JavaScriptu.

pustiti html;
html = `<ul>
<li> Ime: John Doe </li>
<li> Starost: 24 </li>
<li> Delovno mesto: programski inženir </li>
</ul>`;
dokument.body.innerHTML = html;

Zgornja koda JavaScript uporablja HTML za tiskanje seznama treh elementov v brskalniku:

Če želite doseči enak rezultat brez literalov predloge (ali pred literali predloge), bi morali uporabiti narekovaje. Vendar kode ne bi mogli razširiti v več vrstic, kot lahko z literali predloge.

pustiti html;
html = "<ul><li>Ime: John Doe</li><li>Starost: 24</li><li>Delovno mesto: programski inženir</li></ul>";
dokument.body.innerHTML = html;

Interpolacija nizov

Literali predloge vam omogočajo uporabo izrazov v vaših nizih JavaScript s postopkom, imenovanim interpolacija. Z interpolacijo nizov lahko v svoje nize vdelate izraze ali spremenljivke z uporabo ${izraz} rezervirano mesto. Tukaj postane vrednost literalov predloge JavaScript resnično očitna.

let userName = "Jane Doe";
pustiti starost = 21;
pusti službo = "Spletni razvijalec";
pustiti izkušnje = 3;
pustiti html;
html = `<ul>
<li> Ime: ${userName} </li>
<li> Starost: ${age} </li>
<li> Naziv delovnega mesta: ${job} </li>
<li> Leta izkušenj: ${experience} </li>
<li> Raven razvijalca: ${experience < 5? "Junior do Intermediate": "Starejši"} </li>
</ul>`;
dokument.body.innerHTML = html;

Zgornja koda ustvari naslednji rezultat v konzoli:

Prvi štirje argumenti ${izraz} placeholder so nizovne spremenljivke, peti pa je pogojni izraz. Izraz se opira na vrednost ene od spremenljivk (izkušnje), da narekuje, kaj naj prikaže v brskalniku.

Oblikovanje elementov na vaši spletni strani z JavaScriptom

Poleg funkcionalne povezave z razvojem spletnih strani JavaScript deluje s HTML-jem, da vpliva na zasnovo in postavitev spletne strani. Lahko manipulira z besedilom, ki se pojavi na spletni strani, kot je to v primeru dobesednih predlog.

Lahko celo pretvori HTML v slike in jih prikaže na spletni strani.