LearnJS

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

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

Обычная строка записывается в одинарных или двойных кавычках:

let name = 'Иван';
let message = 'Привет, Иван';

А шаблонная строка записывается в обратных кавычках:

let name = 'Иван';
let message = `Привет, ${name}`;

console.log(message);

Результат:

Привет, Иван

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

Что такое шаблонные строки

Шаблонная строка - это строка, которая создается с помощью обратных кавычек.

let text = `Это шаблонная строка`;

Обратные кавычки отличаются от обычных кавычек.

  • ‘текст’ - строка в одинарных кавычках;
  • “текст” - строка в двойных кавычках;
  • `текст` - шаблонная строка.

Главная особенность шаблонных строк в том, что внутрь них можно вставлять переменные через конструкцию ${…}.

let language = 'JavaScript';

console.log(`Я изучаю ${language}`);

Результат:

Я изучаю JavaScript

Обычные строки и склеивание

До шаблонных строк часто использовали склеивание строк через оператор +.

let name = 'Иван';
let age = 25;

let message = 'Меня зовут ' + name + ', мне ' + age + ' лет';

console.log(message);

Результат:

Меня зовут Иван, мне 25 лет

Такой код работает, но читать его не всегда удобно. Нужно следить за пробелами, кавычками и плюсами.

То же самое можно записать через шаблонную строку:

let name = 'Иван';
let age = 25;

let message = `Меня зовут ${name}, мне ${age} лет`;

console.log(message);

Результат будет таким же:

Меня зовут Иван, мне 25 лет

Но сама запись стала короче и понятнее.

Обратные кавычки

Для шаблонных строк используются обратные кавычки.

let text = `Привет`;

Это не одинарная кавычка и не двойная. На клавиатуре обратная кавычка обычно находится на клавише с буквой Ё в русской раскладке или слева от цифры 1 в английской раскладке.

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

let name = 'Иван';

console.log('Привет, ${name}');

Результат:

Привет, ${name}

JavaScript вывел текст как есть, потому что это обычная строка.

Вставка переменных в строку

Чтобы вставить переменную в шаблонную строку, нужно написать ${} и указать переменную внутри фигурных скобок.

let name = 'Анна';

console.log(`Привет, ${name}`);

Результат:

Привет, Анна

Можно вставлять несколько переменных.

let product = 'Книга';
let price = 700;

console.log(`Товар: ${product}. Цена: ${price} рублей.`);

Результат:

Товар: Книга. Цена: 700 рублей.

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

Выражения внутри строки

Внутрь ${} можно вставлять не только переменные, но и выражения.

let price = 500;
let count = 3;

console.log(`Сумма заказа: ${price * count} рублей`);

Результат:

Сумма заказа: 1500 рублей

JavaScript сначала выполнит выражение price * count, а потом подставит результат в строку.

Можно использовать и более простые выражения:

let age = 17;

console.log(`Через год вам будет ${age + 1}`);

Результат:

Через год вам будет 18

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

let price = 500;
let count = 3;
let total = price * count;

console.log(`Сумма заказа: ${total} рублей`);

Такой код проще читать.

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

Шаблонные строки можно переносить на несколько строк.

let text = `Первая строка
Вторая строка
Третья строка`;

console.log(text);

Результат:

Первая строка
Вторая строка
Третья строка

Это удобно, когда нужно подготовить длинный текст.

let name = 'Иван';

let message = `Здравствуйте, ${name}!
Спасибо за регистрацию на сайте.`;

console.log(message);

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

Кавычки внутри строки

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

let message = `Он сказал: "Я изучаю JavaScript"`;

console.log(message);

Результат:

Он сказал: "Я изучаю JavaScript"

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

let message = "Он сказал: \"Я изучаю JavaScript\"";

Такой код тоже работает, но для новичка шаблонная строка часто выглядит понятнее.

Где удобно использовать шаблонные строки

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

Например, вывести сообщение:

let userName = 'Олег';
let points = 120;

console.log(`Пользователь ${userName} набрал ${points} баллов`);

Или собрать строку для страницы:

let title = 'JavaScript';
let lessonNumber = 10;

let lessonTitle = `Урок ${lessonNumber}. ${title}`;

console.log(lessonTitle);

Результат:

Урок 10. JavaScript

Также шаблонные строки часто встречаются при работе с HTML, адресами страниц, сообщениями об ошибках и выводом данных в консоль.

Частые ошибки

Первая частая ошибка - использовать обычные кавычки вместо обратных.

let name = 'Иван';

console.log('Привет, ${name}');

В этом случае переменная не подставится.

Правильно так:

let name = 'Иван';

console.log(`Привет, ${name}`);

Вторая ошибка - забыть знак $.

let name = 'Иван';

console.log(`Привет, {name}`);

Результат:

Привет, {name}

JavaScript не понял, что нужно подставить переменную, потому что правильная запись выглядит так: ${name}.

Третья ошибка - забыть закрыть фигурную скобку или обратную кавычку.

let name = 'Иван';

console.log(`Привет, ${name);

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

Четвертая ошибка - делать внутри строки слишком много логики.

let price = 500;
let count = 3;
let discount = 100;

console.log(`Итого: ${price * count - discount} рублей`);

Такой пример еще читается нормально. Но если выражение становится длиннее, лучше вынести расчет отдельно.

let price = 500;
let count = 3;
let discount = 100;
let total = price * count - discount;

console.log(`Итого: ${total} рублей`);

Так код будет проще проверять и исправлять.

Что дальше

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

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