Основы интерполяции строк
Встраивайте выражения в шаблонные литералы.
«Основы интерполяции строк» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Что такое шаблонные литералы
Шаблонные литералы — это способ создавать строки с помощью обратного апострофа вместо кавычек. Они позволяют напрямую встраивать выражения в строку без ручной конкатенации.
Заполнитель записывается в виде знака доллара, за которым следуют фигурные скобки с выражением внутри. JavaScript вычисляет выражение и вставляет его значение в строку.
const name = "Alice"
const greeting = "Hello, " + name + "!"
console.log(greeting)Синтаксис интерполяции
В шаблонном литерале выражение помещается между открывающей последовательностью `${` и закрывающей фигурной скобкой. Выражение вычисляется и преобразуется в строку.
В приведённом ниже примере используется обычная конкатенация, дающая тот же результат, что и интерполяция, поэтому идея понятна без показа синтаксиса литерала.
const product = "Book"
const price = 12
const line = product + " costs " + price + " dollars"
console.log(line)Преимущества интерполяции
Конкатенацию с оператором плюса становится трудно читать, когда нужно смешать много переменных и обычного текста. Интерполяция сохраняет окружающий текст целиком и заменяет только динамические части.
- Меньше операторов плюса
- Нет случайных ошибок в расстановке пробелов
- Намерение выражено яснее
const user = "Bob"
const count = 3
console.log(user + " has " + count + " messages")Встраивание любого выражения
Заполнитель может содержать любое допустимое выражение, а не только переменную. Работают арифметические операции, вызовы функций и доступ к свойствам.
const a = 5
const b = 7
console.log("Sum is " + (a + b))
console.log("Max is " + Math.max(a, b))Вызов функций внутри
Можно вызвать функцию и передать её возвращаемое значение в строку. В примере показана эквивалентная форма с конкатенацией.
function upper(s) { return s.toUpperCase() }
const word = "hello"
console.log("Loud: " + upper(word))Доступ к свойствам
Свойства объекта можно читать непосредственно внутри заполнителя. Здесь мы читаем поля объекта пользователя.
const user = { name: "Eve", age: 30 }
console.log("Name: " + user.name + ", Age: " + user.age)Числа превращаются в строки
Когда число попадает в контекст строки, оно автоматически преобразуется в текстовый вид. При интерполяции происходит такое же приведение типа.
const total = 19.99
console.log("Total: $" + total)Тернарные выражения в заполнителях
Условная логика с тернарным оператором помещается в заполнитель, позволяя выбрать одно из двух значений непосредственно в строке.
const score = 72
const grade = score >= 60 ? "Pass" : "Fail"
console.log("Result: " + grade)Вложенные выражения
Заполнители могут содержать цепочки методов и вложенные вызовы. Вставляется результат вычисления выражения.
const items = ["a", "b", "c"]
console.log("Joined: " + items.join("-"))
console.log("Count: " + items.length)Смешивание множества значений
Шаблонные литералы особенно полезны, когда в одном предложении объединяется несколько переменных. Сравните читаемую версию с интерполяцией, описанную словами, с этим эквивалентом на основе конкатенации.
const city = "Paris"
const temp = 21
const sky = "sunny"
console.log("In " + city + " it is " + temp + "C and " + sky)Экранирование знака доллара
Если нужно вывести буквальную последовательность `${` как текст, а не как заполнитель, экранируйте знак доллара обратной косой чертой внутри шаблонного литерала. В обычных строках экранирование не требуется.
const text = "Use $\{x\} for a placeholder"
console.log(text)Быстрая проверка
Проверьте, насколько хорошо Вы поняли интерполяцию.
Итоги
Итоги: шаблонные литералы используют обратные апострофы и заполнители для встраивания выражений в строки.
- Заполнитель вычисляет любое выражение
- Значения приводятся к строкам
- Интерполяция понятнее длинной конкатенации
- Экранируйте знак доллара, чтобы показать его буквально
const n = "World"
console.log("Hello, " + n + "!")Часто задаваемые вопросы
Урок «Основы интерполяции строк» бесплатный?
Да — полный текст урока «Основы интерполяции строк» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Основы интерполяции строк»?
Встраивайте выражения в шаблонные литералы. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Основы интерполяции строк»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы интерполяции строк
- Многострочные строки
- Функции с шаблонными тегами
- Практические сценарии применения шаблонных тегов