Kaip suformatuoti eilutę „JavaScript“?

„JavaScript“ kalboje eilutė yra simbolių grupė, įterpta poromis viengubų arba dvigubų kabučių. Yra daug būdų formatuoti eilutes „JavaScript“.

Norėdami sujungti eilutes, galite naudoti konkrečius metodus arba operatorius. Jūs netgi galite atlikti konkrečias operacijas, kad nuspręstumėte, kokia eilutė bus rodoma kur ir kada.

Sužinokite, kaip suformatuoti „JavaScript“ eilutes naudojant sujungimo metodus ir šablonų literalius.

Stygų sujungimas

„JavaScript“ leidžia sujungti eilutes naudojant kelis metodus. Naudingas požiūris yra concat () metodas. Šis metodas naudoja dvi ar daugiau eilučių. Jis naudoja vieną iškvietimo eilutę ir kaip argumentus priima vieną ar daugiau eilučių.

const vardas = "Jonas";
const pavardė = "Doe";
leisti stringVal;
stringVal = vardas.concat("", pavardė);
konsolė.log (stringVal);

Čia concat sujungia eilutės argumentus (tuščią vietą ir pavardę) su iškvietimo eilute (firstName). Tada kodas išsaugo gautą naują eilutę kintamajame (stringVal) ir išspausdina naują reikšmę naršyklės konsolėje:

Kitas būdas sujungti eilučių rinkinį yra naudoti pliuso operatorių. Šis metodas leidžia derinti eilučių kintamuosius ir eilučių literalius, kad sukurtumėte naujas eilutes.

const vardas = "Jonas";
const middleName = "Maikas";
const pavardė = "Doe";
leisti stringVal;
stringVal = vardas + "" + MiddleName + "" + pavardė;
konsolė.log (stringVal);

Aukščiau pateiktas kodas spausdina šią išvestį į konsolę:

Trečias būdas sujungti „JavaScript“ eilutes reikalauja pliuso ir lygybės ženklų. Šis metodas leidžia pridėti naują eilutę esamos eilutės pabaigoje.

const vardas = "Jonas";
const pavardė = "Doe";
leisti stringVal;
stringVal = vardas;
stringVal += "";
stringVal += pavardė;
konsolė.log (stringVal);

Šis kodas prie kintamojo firstName prideda tuščią tarpą ir kintamojo lastName reikšmę, todėl gaunama tokia išvestis:

Šablonų raidės

Šablonų literalai yra ES6 funkcija, leidžianti formatuoti „JavaScript“ eilutes. Šablono pažodžiui eilutėms rodyti naudojama atpakalinių ženklų pora (`). Šis eilučių formatavimo metodas leidžia rodyti švaresnes kelių eilučių eilutes „JavaScript“.

leisti html;
html = `<ul>
<li> Vardas: John Doe </li>
<li> Amžius: 24 </li>
<li> Darbas: programinės įrangos inžinierius </li>
</ul>`;
dokumentas.body.innerHTML = html;

Naudojamas aukščiau pateiktas JavaScript kodas HTML jei norite išspausdinti trijų elementų sąrašą naršyklėje:

Jei norite pasiekti tą pačią išvestį be šabloninių literalų (arba prieš šabloninius literalius), turėsite naudoti kabutes. Tačiau negalėsite išplėsti kodo į kelias eilutes, kaip tai daroma naudojant šabloninius literatus.

leisti html;
html = "<ul><li>Vardas: John Doe</li><li>Amžius: 24</li><li>Darbas: programinės įrangos inžinierius</li></ul>";
dokumentas.body.innerHTML = html;

Stygų interpoliacija

Šablonų literalai leidžia naudoti išraiškas „JavaScript“ eilutėse, naudojant procesą, vadinamą interpoliacija. Naudodami eilučių interpoliaciją, į savo eilutes galite įterpti išraiškas arba kintamuosius naudodami ${expression} vietos rezervuaras. Čia „JavaScript“ šablonų raidžių vertė tampa tikrai akivaizdi.

tegul vartotojo vardas = "Jane Doe";
leisti amžius = 21;
leiskite dirbti = "Žiniatinklio kūrėjas";
leisti patirtis = 3;
leisti html;
html = `<ul>
<li> Vardas: ${userName} </li>
<li> Amžius: ${age} </li>
<li> Pareigos: ${job} </li>
<li> Patirtis: ${experience} </li>
<li> Kūrėjo lygis: ${experience < 5? "Nuo jaunesnio iki vidutinio": "Vyresnysis"} </li>
</ul>`;
dokumentas.body.innerHTML = html;

Aukščiau pateiktas kodas konsolėje sukuria tokią išvestį:

Pirmieji keturi argumentai ${expression} vietos rezervavimo ženklai yra eilutės kintamieji, bet penktasis yra sąlyginė išraiška. Išraiška remiasi vieno iš kintamųjų (patirties) reikšme, kad diktuotų, ką ji turi rodyti naršyklėje.

Elementų formatavimas jūsų tinklalapyje naudojant „JavaScript“.

Be funkcinio ryšio su tinklalapio kūrimu, JavaScript veikia su HTML, kad paveiktų tinklalapio dizainą ir išdėstymą. Jis gali manipuliuoti tinklalapyje rodomu tekstu, kaip tai daroma su šabloniniais literalais.

Jis netgi gali konvertuoti HTML į vaizdus ir rodyti juos tinklalapyje.