Карта сайта

Урок 17: Шаблонные строки в JavaScript’е (синтаксис, интерполяция, многострочные строк)

/Уроки по JavaScript/Урок 17: Шаблонные строки в JavaScript’е (синтаксис, интерполяция, многострочные строк)
Урок 17: Шаблонные строки в JavaScript’е (синтаксис, интерполяция, многострочные строк)
Автор: написал в рубрике Уроки по JavaScript. 0 Комментариев.

Сегодня мы разберем одну из самых удобных возможностей JavaScript, это шаблонные строки (template strings). Если вы устали от конкатенации строк через +, многострочных конструкций с \n и вечных ошибок в кавычках, этот урок станет для вас настоящим спасением. Давайте будем писать чистый и читаемый код.

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

Шаблонные строки, или template literals, появились в стандарте ES6 и решают множество проблем работы с текстом в JavaScript. Они позволяют:

  • Вставлять переменные прямо в строку без конкатенации.
  • Создавать многострочные тексты без лишних символов.
  • Использовать сложные выражения внутри строк.

И всё это с помощью обратных кавычек `.
Давайте разбираться по порядку.

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

Главная особенность шаблонных строк, это использование обратных кавычек (`) вместо одинарных (' ') или двойных (" ").

Пример 1: Базовая строка

const message = `Привет, мир!`;
console.log(message); // Привет, мир!

Важно: Обратные кавычки находятся на клавиатуре обычно рядом с клавишей Esc (в английской раскладке). Нажимать нужно Shift + ~.

Интерполяция переменных

Интерполяция это подстановка значений переменных или выражений внутрь строки. Для этого используется синтаксис ${}.

Пример 2: Простая интерполяция

const userName = "Анна";
const age = 25;

// Старый подход (конкатенация)
const oldWay = "Меня зовут " + userName + ", мне " + age + " лет.";

// Новый подход (шаблонная строка)
const newWay = `Меня зовут ${userName}, мне ${age} лет.`;

console.log(newWay); // Меня зовут Анна, мне 25 лет.

Преимущества:

  • Код становится чище.
  • Нет риска забыть пробел или +.
  • Можно вставлять любые выражения внутри ${}.

Пример 3: Выражения внутри интерполяции

const a = 10;
const b = 5;

console.log(`Сумма: ${a + b}`); // Сумма: 15
console.log(`Результат: ${a > b ? "Победа" : "Поражение"}`); // Результат: Победа

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

Раньше для создания текста с переносами строк приходилось использовать символ \n или конкатенацию. Шаблонные строки решают эту проблему!

Пример 4: Многострочный текст

// Старый подход
const poemOld = "Я помню чудное мгновенье:\n" +
                "Передо мной явилась ты,\n" +
                "Как мимолетное виденье,\n" +
                "Как гений чистой красоты.";

// Новый подход
const poemNew = `Я помню чудное мгновенье:
Передо мной явилась ты,
Как мимолетное виденье,
Как гений чистой красоты.`;

console.log(poemNew);

Обратите внимание:

  • Все пробелы и переносы внутри обратных кавычек сохраняются.
  • Это удобно для написания HTML-шаблонов, стихотворений или форматированных сообщений.

Продвинутые возможности

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

Вы можете использовать шаблонные строки внутри ${}:

const isAdmin = true;
const userName = "Максим";

const message = `Пользователь: ${isAdmin ? `Админ (${userName})` : "Гость"}`;
console.log(message); // Пользователь: Админ (Максим)

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

Это более сложная тема, но для общего развития: функции можно использовать для обработки шаблонных строк. Например:

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
  }, '');
}

const price = 100;
const discount = 20;

const total = highlight`Цена: ${price} руб. Скидка: ${discount}%.`;
console.log(total); // Цена: <mark>100</mark> руб. Скидка: <mark>20</mark>%.

Практические задачи

Закрепим знания на практике! Решите задачи, а затем сверьтесь с ответами ниже.

Задача 1: Преобразуйте конкатенацию в шаблонную строку

Исходный код:

const product = "яблоки";
const count = 10;
const price = 50;

const text = "Вы купили " + count + " кг " + product + " по " + price + " руб. за кг.";

Решение:

const text = `Вы купили ${count} кг ${product} по ${price} руб. за кг.`;

Задача 2: Создайте многострочный шаблон

Напишите код, который выведет в консоль:

Имя: Иван
Возраст: 30
Страна: Россия

Решение:

const userInfo = `Имя: Иван
Возраст: 30
Страна: Россия`;

console.log(userInfo);

Задача 3: Используйте выражение внутри интерполяции

Даны переменные:

const x = 15;
const y = 3;

Создайте строку: «Результат: 15 * 3 = 45».

Решение:

const result = `Результат: ${x} * ${y} = ${x * y}`;
console.log(result);

Задача 4: Форматирование адреса

Создайте шаблонную строку для адреса:

Улица: Пушкина
Дом: 15
Квартира: 30

Решение:

const address = `Улица: Пушкина
Дом: 15
Квартира: 30`;

console.log(address);

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

  1. Использование других кавычек внутри ${}
    Нельзя писать:

    `${"userName"}` // Ошибка: userName не определена

    Правильно:

    `${userName}` // Переменная без кавычек!
  2. Пробелы в обратных кавычках
    Помните, что все пробелы и переносы сохраняются:

    const text = `Привет, 
мир!`; // "мир!" будет на новой строке с пробелом в начале.

Шаблонные строки это мощный инструмент, который делает код чище и удобнее. Практикуйтесь, экспериментируйте с вложенными шаблонами и не бойтесь использовать их в реальных проектах!

Если вы хотите освоить JavaScript от основ до продвинутых тем, то посмотрите полный курсу: JavaScript для начинающих. Там вас ждут 30 уроков, практические задания и поддержка аудитории!