ES6 - Строки

В этой статье мы разберем что такое шаблоны строк в ES6.
В ES5 нам приходилось выполнять конкатенацию строк и обычно мы использовали для этого знак плюс
В ES6 можно писать переменные внутри строки и это позволяет делать намного лаконичнее чем раньше Для этого используется специальная кавычка, которую обычно вы не используете. Она находится там же, где и символ тильда. Мы пишем строку в этих кавычках и используем $ и фигурные скобки, чтобы передать туда переменную
Это намного чище и понятнее чем раньше.
Вторая проблема с который все сталкивались очень часто в ES5, это когда мы хотим написать кусок разметки в переменную. Обычно это выглядело так
Этот код читать без слез невозможно. В ES6 мы можем использовать шаблоны строк и тогда это будет выглядеть вот так
Мы опять применили специальные кавычки и использовали доллар и фигурные скобки, чтобы передать в шаблон переменную.
Но если посмотреть внимательно на лог в консоли, то он отличается от той, которая была в ES5. Как мы видим, тут учитываются все пробелы и переносы строк, которые мы поставили. Так что нужно помнить, что все пробелы и переносы в шаблонах всегда учитываются, но для большинства кейсов это не критично.
Внутри кавычек не обязательно должна идти переменная. Там может быть любое выражение. Например
В консоли мы получим 50.
И еще один пример, который не особо часто используется, но вы должны хотя бы знать, что так можно писать.
Впереди ES6 строки можно написать функцию без вызова. Тогда внутри в этой функции мы можем получить доступ к массиву строк и переменным.
Теперь внутри мы можем изменить любую переменную. Например, поменяем вторую переменную на awake если значение времени меньше 20. И нам необходимо вернуть новую строку.
Такие вещи встречаются не так часто, но знать как они выглядят надо
В этой статье мы с вами разобрали как использовать шаблоны в ES6 и насколько это проще.

Если у вас возникли какие-то вопросы, пишите их в наш телеграмм-чат.