Како форматирате стринг у ЈаваСцрипт-у?

У ЈаваСцрипт-у, стринг је група знакова затворена паром једноструких или двоструких наводника. Постоји много начина за форматирање стрингова у ЈаваСцрипт-у.

Можете користити одређене методе или операторе да комбинујете низове. Можете чак и да извршите одређене операције да бисте одлучили који низ ће се појавити где и када.

Научите како да форматирате своје ЈаваСцрипт стрингове користећи методе конкатенације и литерале шаблона.

Стринг Цонцатенатион

ЈаваСцрипт вам омогућава да повежете стрингове користећи неколико приступа. Користан приступ је цонцат() методом. Овај метод користи два или више низова. Користи један позивни стринг и узима један или више стрингова као аргументе.

цонст фирстНаме = "Јохн";
цонст презиме = "Дое";
дозволити стрингВал;
стрингВал = фирстНаме.цонцат("", презиме);
конзола.лог (стрингВал);

Овде цонцат придружује аргументе стрингова (празан простор и презиме) са позивним стрингом (име). Код затим чува резултујући нови стринг у променљивој (стрингВал) и штампа нову вредност на конзоли претраживача:

Други начин повезивања колекције стрингова је коришћење плус оператора. Овај метод вам омогућава да комбинујете стринг варијабле и стринг литерале да бисте креирали нове стрингове.

цонст фирстНаме = "Јохн";
цонст средње име = "Мике";
цонст презиме = "Дое";
дозволити стрингВал;
стрингВал = име + "" + средње име + "" + презиме;
конзола.лог (стрингВал);

Код изнад штампа следећи излаз на конзоли:

Трећи приступ спајању ваших ЈаваСцрипт стрингова захтева употребу знака плус и једнако. Овај метод вам омогућава да додате нови стринг на крај постојећег.

цонст фирстНаме = "Јохн";
цонст презиме = "Дое";
дозволити стрингВал;
стрингВал = фирстНаме;
стрингВал += "";
стрингВал += презиме;
конзола.лог (стрингВал);

Овај код додаје празан простор и вредност променљиве ластНаме променљивој фирстНаме, производећи следећи излаз:

Литерали шаблона

Литерали шаблона су ЕС6 функција која вам омогућава да форматирате ЈаваСцрипт стрингове. Литерал шаблона користи пар кракова (`) за приказ стрингова. Овај метод форматирања стрингова вам омогућава да прикажете чистије вишелинијске стрингове у ЈаваСцрипт-у.

дозволити хтмл;
хтмл = `<ул>
<ли> Име: Јохн Дое </li>
<ли> Старост: 24 </li>
<ли> Посао: софтверски инжењер </li>
</ul>`;
документ.боди.иннерХТМЛ = хтмл;

ЈаваСцрипт код изнад користи ХТМЛ да одштампате листу од три ставке у претраживачу:

Да бисте постигли исти излаз без литерала шаблона (или испред литерала шаблона), требало би да користите наводнике. Међутим, не бисте могли да проширите код на више редова као што можете са литералима шаблона.

дозволити хтмл;
хтмл = "<ул><ли>Име: Јохн Дое</li><ли>Старост: 24</li><ли>Посао: софтверски инжењер</li></ul>";
документ.боди.иннерХТМЛ = хтмл;

Интерполација низа

Литерали шаблона вам омогућавају да користите изразе у својим ЈаваСцрипт стринговима кроз процес који се зове интерполација. Са интерполацијом стрингова можете да уградите изразе или променљиве у своје стрингове користећи ${екпрессион} чувар места. Овде вредност литерала ЈаваСцрипт шаблона постаје заиста очигледна.

нека корисничко име = "Јане Дое";
дозволити старост = 21;
нека посао = "Веб Девелопер";
дозволити искуство = 3;
дозволити хтмл;
хтмл = `<ул>
<ли> Име: ${усерНаме} </li>
<ли> Узраст: ${аге} </li>
<ли> Назив посла: ${јоб} </li>
<ли> Године искуства: ${екпериенце} </li>
<ли> Ниво програмера: ${екпериенце < 5? "Од јуниора до средњег": "Сениор"} </li>
</ul>`;
документ.боди.иннерХТМЛ = хтмл;

Код изнад даје следећи излаз у конзоли:

Прва четири аргумента ${екпрессион} чувар места су стринг променљиве, али пети је условни израз. Израз се ослања на вредност једне од променљивих (искуство), да диктира шта треба да прикаже у претраживачу.

Форматирање елемената на вашој веб страници помоћу ЈаваСцрипт-а

Осим што има функционалну повезаност са развојем веб странице, ЈаваСцрипт ради са ХТМЛ-ом како би утицао на дизајн и изглед веб странице. Може да манипулише текстом који се појављује на веб страници, као што је случај са литералима шаблона.

Може чак и да претвори ХТМЛ у слике и прикаже их на веб страници.