Строки и шаблонные литералы в JavaScript ES6

Далее на странице...

Построение комплексной строки

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

Обратный апостроф - Для всех строк

Многострочные строки

Строки это очень важная часть программирования. Здесь мы вспомним, как было принято работать со строками ранее – до появления спецификации ES6.

И потом узнаем о более простом способе построения строк с помощью, так называемых, шаблонных литералов, используя которые можно удобнее и быстрее создавать комплексные и многострочные строки. И тем самым писать более правильный и чистый код.

Начнем с создания новых переменных, которые потом мы сможем объединить в одну большую строку.


const firstName = 'Anton';
const job = 'driver';
const birthYear = 1982;
const year = 2022;

Теперь, нужно использовать эти переменные для построения следующей строки:


"I'm Anton, a 30 or 40 years old driver"

Построение комплексной строки

Вот как выглядит построение строки из других строк и переменных в JavaScript. Это стандартный способ, существующий до появления спецификации ES6:

Пример 1.1


const anton = "I'm " + firstName + ', a ' + (year - birthYear) + ' years old ' + job + '.';
console.log(anton);

Результат:


I'm Anton, a 40 years old driver.

На что здесь нужно обратить внимание?

1. Здесь для слова "I'm" обязательно используются двойные кавычки, так как оно уже содержит в себе апостроф (одинарную кавычку). Это правило относится ко всем словам, содержащим апостроф, например "it's", "does't" и др.

2. Выражение (year - birthYear) выполняется в первую очередь, поэтому оно заключено в скобки. Сначала нужно узнать, сколько индивиду лет. Из таблицы приоритета операторов нам известно, что группировка, то есть скобки (...) имеют самый высокий приоритет. И только после этого работает сложение, то есть будут складываться элементы выражения в одну строку.

3. Интересен еще один момент: результатом выражения (year - birthYear) будет число, в то время как остальные элементы общего выражения - это строки. Если у кого-то возникает вопрос: как это будет работать? То опять же это пройденный материал - статья "Преобразование или приведение типов в JavaScript" - раздел преобразование чисел. То есть в данном случае JavaScript просто преобразовывает число в строку, после чего объединяет уже только строки.

4. При составлении подобных выражений нужно быть внимательным и следить за пробелами при сложении строк. Например, эта часть выражения: ', a ' - здесь нужен пробел перед артиклем a и после него. Это бывает не просто, особенно, когда выражения громоздки.

Итак, при составлении подобных сложных/комплексных строк, возникают определенные сложности: нужно расставлять пробелы и знаки сложения. Это не всегда удобно.

Теперь, начиная со стандарта ES6, существует хороший инструмент для выполнения такого рода вещей, который называется шаблонные литералы.

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

С шаблонными литералами появилась возможность составления комплексных строк более нормальным/удобным способом. При этом переменные вставляются непосредственно в строку.

Давайте посмотрим, как это работает.

Создаем новую переменную и пишем шаблонный литерал.

Пример 2.1


const antonNew = `I'm ${firstName}`;
console.log(antonNew);

Результат:


I'm Anton

В примере используется определённый вид кавычек. Это обратный апостроф или гравис. Этот символ расположен на клавише Ё. Его также называют обратное ударение или обратные одинарные кавычки.

Итак, гравис используется для того, чтобы дать понять Javascript, что мы пишем шаблонную строку. При этом двойные или одиночные кавычки здесь работать не будут.

Итак, что происходит внутри обратных кавычек? Мы просто пишем строку и там, где нужно вставляем переменные. Для вставки переменных используется знак доллара, фигурные скобки и указывается имя переменной.

Далее, чтобы посмотреть, действительно ли это работает, выводим новую переменную в консоль.

Пример показывает, что в случае с шаблонными литералами все делается намного проще.

И чтобы окончательно в этом убедиться построим комплексную строку заново, используя шаблонные литералы.

Пример 2.2


const antonNew = `I'm ${firstName}, a ${year - birthYear} years old ${job}.`;
console.log(antonNew);

Результат:


I'm Anton, a 40 years old driver.

Как видно из примера, использование шаблонных литералов в JavaScript упрощает построение строки, так как при этом уже не нужно использовать сложение "+", не нужно думать о том, что где-то мы можем пропустить пробел, как это нередко бывает. Это намного проще.

Итак, теперь вы знаете, как работают шаблонные литералы, определенные в спецификации ES6 JavaScript. И в действительности, это одна из наиболее часто используемых особенностей привнесенных вместе с ES6.

Обратный апостроф - Для всех строк

Следует знать, что обратный апостроф или гравис можно использовать для написания всех строк.

В примере выше мы работали с неоднородной/комплексной строкой: где кроме простого текста используется вставка переменных. Следующим образом: ${firstName}.

Так вот обратный апостроф или гравис может использоваться и для простых строк.

Пример 3.1


console.log(`Just a regular string...`) //Просто обычная строка

Результат


Just a regular string...

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

Многострочные строки

Рассмотрим еще один пример использования шаблонных литералов - это создание многострочных строк. Здесь шаблонные литералы также имеют преимущество, так как раньше многострочные строки были немного громоздки, не удобны для написания и для восприятия.

Вот как это выглядело до внедрения стандарта ES6:

Пример 4.1


console.log('String \n\
multiple \n\
lines');

Результат


String
multiple
lines

Из примера видно, что каждый раз для переноса строки дважды используется обратный слеш и буква n между ними \n\. Так работал JavaScript в прошлом и считается, что подобные методы - это недоработки в языке.

С появлением версии ES6 и шаблонных литералов нет необходимости в использовании дополнительных символов. Сейчас, используя обратные кавычки, для переноса стоки достаточно нажать Enter.

Пример 4.2


console.log(`String
multiple
lines`)

Результат


String
multiple
lines

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

Итак, теперь для создания комплексных или многострочных строк, всегда используйте шаблонные литералы, потому что этот способ и такой код является более чистым и правильным.