Шаблонные строки в JS

В этой статье вы подробнее познакомитесь с шаблоннами строками в JavaScript.

Шаблонные строки — строки, внутри которых можно использовать выражения: например, значения переменных.

Такие строки оборачиваются в обратные апострофы `...`. Используемое в строке выражение — в фигурные скобки со знаком доллара ${...}. Например:

const name = 'Андрей';
console.log(`Привет, ${name}!`); // Вывод: Привет, Андрей!

Кавычки в строках

Без шаблонных строк

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

const str1 = 'Это обычная строка';

// нельзя использовать один тип кавычек
const str2 = 'Это "цитата" внутри строки';  // тут все ок
const str3 = 'Это 'цитата' внутри строки';  // тут будет ошибка

const str4 = "Еще одна 'цитата' внутри строки"; // тут все ок
const str5 = "Еще одна "цитата" внутри строки"; // тут будет ошибка

Чтобы использовать те же кавычки внутри строки, приходилось использовать экранирование специальных символов с помощью \. 

// экранирование специальных символов с помощью \
const str3 = 'Это \'цитата\' внутри строки';  // тут все ок
const str5 = "Еще одна \"цитата\" внутри строки"; // тут тоже все ок

Такой подход делает код менее читабельным и красивым.

С шаблонными строками

С приходом шаблонных строк появилась возможность использовать еще один способ задания строк — обратные апострофы `...`. 

const str1 = `Это обычная строка`;
const str2 = `Это строка с 'цитатой' внутри`;
const str3 = `Это цитата с цитатой в "двойных кавычках" внутри`;

Как видите, шаблонные строки не только упрощают включение цитат, но и делают код чище.

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

Шаблонные строки также облегчают запись многострочных строк.

Без шаблонных строк

Без шаблонных строк приходилось использовать специальный символ переноса каретки \n и оператор +.

const message1 = 'Это очень длинный текст, \n' + 
'который занимает несколько строк\n' + 
'в коде.'

console.log(message1)

С шаблонными строками

С приходом шаблонных строк все стало проще: достаточно записать многострочную строку в обратных апострофах `...`.

const message1 = `Это очень длинный текст, 
который занимает несколько строк 
в коде.`

console.log(message1)

Вывод (в обоих случаях)

Это очень длинный текст, 
который занимает несколько строк 
в коде.

Интерполяция выражений

Интерполяция выражений — использование переменных и выражений внутри шаблонных строк.

Без шаблонных строк

До появления JavaScript ES6 для объединения переменных и выражений в строке приходилось использовать оператор +. Например:

const name = 'Андрей';
console.log('Привет,  ' + name); // Вывод: Привет, Андрей

С шаблонными строками

С помощью шаблонных строк включать переменные и выражения внутрь строки стало проще. Для этого нужно использовать синтаксис ${...}.

const name = 'Андрей';
console.log(`Привет, ${name}`); 

const result = 4 + 5;

// шаблонные строки с выражениями
console.log(`Результат 4 + 5: ${result}`);

console.log(`${result < 10 ? 'Меньше 10': 'Больше или равно 10'}`)

Вывод

Привет, Андрей
Результат 4 + 5: 9
Меньше 10

Тегированные шаблоны

Обычно для передачи аргументов используется функция. 

function tagExample(strings) {
    return strings;
}

// передаем аргумент
const result = tagExample('Привет, Андрей');

console.log(result);

Однако вы можете создавать тегированные шаблоны (tagged templates), которые ведут себя как функции, с помощью шаблонных строк. Для этого нужно использовать теги, которые позволяют парсить шаблонные строки с помощью функции.

Тегированные шаблоны определяются почти как функции. Однако при их вызове не нужно передавать аргументы в круглых скобках (). Например:

function tagExample(strings) {
    return strings;
}

// создание тегированного шаблона
const result = tagExample`Привет, Андрей`;

console.log(result); // Вывод: ["Привет, Андрей"]

В качестве первого аргумента передается массив строковых значений. Вы также можете передавать значения и выражения в качестве остальных аргументов. Например:

const name = 'Андрей';
const greet = true;

function tagExample(strings, nameValue) {
    let str0 = strings[0]; // Привет, 
    let str1 = strings[1]; // , как дела?

    if(greet) {
        return `${str0}${nameValue}${str1}`;
    }
}

const result = tagExample`Привет, ${name}, как дела?`;

console.log(result); // Вывод: Привет, Андрей, как дела?

Аналогично можно передать и несколько аргументов в тегированный шаблон.