Как вы форматируете строку в JavaScript?

В JavaScript строка — это группа символов, заключенная в пару одинарных или двойных кавычек. В JavaScript существует множество способов форматирования строк.

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

Узнайте, как форматировать строки JavaScript, используя методы конкатенации и литералы шаблонов.

Конкатенация строк

JavaScript позволяет вам объединять строки, используя несколько подходов. Полезным подходом является конкат() метод. Этот метод использует две или более строк. Он использует одну строку вызова и принимает одну или несколько строк в качестве аргументов.

константное имя = "Джон";
постоянная фамилия = "Доу";
позволять строкаВал;
stringVal = первоеИмя.concat("", фамилия);
консоль.log(строкаVal);

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

Другой способ объединения набора строк — использование оператора «плюс». Этот метод позволяет комбинировать строковые переменные и строковые литералы для создания новых строк.

константное имя = "Джон";
константное среднее имя = "Майк";
постоянная фамилия = "Доу";
позволять строкаВал;
stringVal = имя + "" + отчество + "" + фамилия;
консоль.log(строкаVal);

Приведенный выше код выводит на консоль следующий вывод:

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

константное имя = "Джон";
постоянная фамилия = "Доу";
позволять строкаВал;
stringVal = имя;
строкаВал += "";
stringVal += фамилия;
консоль.log(строкаVal);

Этот код добавляет пробел и значение переменной 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 = `<ул>
<ли> Имя: ${имя_пользователя} </li>
<ли> Возраст: ${возраст} </li>
<ли> Должность: ${job} </li>
<ли> Многолетний опыт: ${опыт} </li>
<ли> Уровень разработчика: ${опыт < 5? "от младшего до среднего": "Старшая"} </li>
</ul>`;
документ.body.innerHTML = HTML;

Приведенный выше код выводит в консоль следующий вывод:

Первые четыре аргумента ${выражение} заполнитель — это строковая переменная, а пятый — условное выражение. Выражение зависит от значения одной из переменных (опыт), чтобы указать, что оно должно отображать в браузере.

Форматирование элементов на вашей веб-странице с помощью JavaScript

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

Он даже может преобразовывать HTML в изображения и отображать их на веб-странице.