Как форматирате низ в JavaScript?

В JavaScript низът е група от знаци, оградени от двойка единични или двойни кавички. Има много начини за форматиране на низове в JavaScript.

Можете да използвате специфични методи или оператори, за да комбинирате низове. Можете дори да извършвате конкретни операции, за да решите кой низ се появява къде и кога.

Научете как да форматирате своите низове в JavaScript с помощта на методи за конкатенация и шаблонни литерали.

Конкатенация на низове

JavaScript ви позволява да свързвате низове, като използвате няколко подхода. Полезен подход е concat() метод. Този метод използва два или повече низа. Той използва един извикващ низ и приема един или повече низове като аргументи.

const firstName = "Джон";
const фамилно име = "Сърна";
позволявам stringVal;





instagram viewer
stringVal = firstName.concat("", фамилия);
конзола.log (stringVal);

Тук concat свързва аргументите на низа (празно място и фамилно име) към извикващия низ (firstName). След това кодът съхранява получения нов низ в променлива (stringVal) и отпечатва новата стойност в конзолата на браузъра:

Друг начин за свързване на колекция от низове е чрез използване на оператора plus. Този метод ви позволява да комбинирате низови променливи и низови литерали, за да създадете нови низове.

const firstName = "Джон";
const средно име = "Майк";
const фамилно име = "Сърна";
позволявам stringVal;
stringVal = firstName + "" + средно име + "" + фамилия;
конзола.log (stringVal);

Кодът по-горе отпечатва следния изход към конзолата:

Третият подход за свързване на вашите JavaScript низове изисква използването на знак плюс и равенство. Този метод ви позволява да добавите нов низ в края на съществуващ.

const firstName = "Джон";
const фамилно име = "Сърна";
позволявам stringVal;
stringVal = firstName;
stringVal += "";
stringVal += фамилно име;
конзола.log (stringVal);

Този код добавя празно пространство и стойността на променливата lastName към променливата firstName, което води до следния изход:

Шаблонни литерали

Шаблонните литерали са функция на ES6, която ви позволява да форматирате JavaScript низове. Шаблонният литерал използва чифт обратни отметки (`) за показване на низове. Този метод на форматиране на низ ви позволява да показвате по-чисти многоредови низове в JavaScript.

позволявам html;
html = `<ул>
<ли> Име: Джон Доу </li>
<ли> Възраст: 24 </li>
<ли> Длъжност: Софтуерен инженер </li>
</ul>`;
документ.body.innerHTML = html;

JavaScript кодът по-горе използва HTML за да отпечатате списък от три елемента в браузъра:

За да постигнете същия резултат без шаблонни литерали (или преди шаблонни литерали), ще трябва да използвате кавички. Въпреки това, не бихте могли да разширите кода върху множество редове, както можете с литералите на шаблона.

позволявам html;
html = "<ул><ли>Име: Джон Доу</li><ли>Възраст: 24</li><ли>Длъжност: Софтуерен инженер</li></ul>";
документ.body.innerHTML = html;

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

Литералите на шаблона ви позволяват да използвате изрази във вашите JavaScript низове чрез процес, наречен интерполация. С интерполацията на низове можете да вграждате изрази или променливи във вашите низове, като използвате ${израз} контейнер. Това е мястото, където стойността на шаблонните литерали на JavaScript става наистина очевидна.

нека потребителско име = "Джейн Доу";
позволявам възраст = 21;
нека работа = "Уеб разработчик";
позволявам опит = 3;
позволявам html;
html = `<ул>
<ли> Име: ${userName} </li>
<ли> Възраст: ${age} </li>
<ли> Длъжност: ${job} </li>
<ли> Години опит: ${experience} </li>
<ли> Ниво на програмист: ${experience < 5? "Junior to Intermediate": "Старши"} </li>
</ul>`;
документ.body.innerHTML = html;

Кодът по-горе създава следния изход в конзолата:

Първите четири аргумента на ${израз} placeholder са низови променливи, но петият е условен израз. Изразът разчита на стойността на една от променливите (опит), за да диктува какво трябва да показва в браузъра.

Форматиране на елементи на вашата уеб страница с JavaScript

Освен функционалната си връзка с разработката на уеб страници, JavaScript работи с HTML, за да повлияе на дизайна и оформлението на уеб страница. Той може да манипулира текста, който се появява на уеб страница, какъвто е случаят с литералите на шаблона.

Той дори може да конвертира HTML в изображения и да ги показва на уеб страница.