Главная страница » JavaScript » 31. Интерполяция

31. Интерполяция

Интерполяция в JavaScript — это метод вставки значений переменных и выражений внутрь строк с использованием шаблонных литералов (template literals). Это делает строки более читаемыми и удобными для формирования динамических сообщений. В этом уроке мы рассмотрим, как использовать интерполяцию, и изучим лучшие практики для работы с шаблонными литералами.

Основные концепции

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

Шаблонные литералы заключаются в обратные кавычки (`).
Внутри шаблонных литералов можно вставлять переменные и выражения с помощью синтаксиса ${expression}.

				
					let name = 'Alice';
let greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"

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

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

				
					let item = 'apple';
let price = 1.5;
let message = `The price of one ${item} is $${price}.`;
console.log(message); // "The price of one apple is $1.5."

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

Внутри шаблонных литералов можно использовать любые выражения, включая арифметические операции и вызовы функций.

				
					let a = 5;
let b = 10;
let result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result); // "The sum of 5 and 10 is 15."

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

Шаблонные литералы позволяют создавать многострочные строки без необходимости использовать символы новой строки (\n).

				
					let poem = `Roses are red,
Violets are blue,
Sugar is sweet,
And so are you.`;
console.log(poem);

Примеры

Пример с переменными

				
					let user = 'Bob';
let age = 30;
let userInfo = `User: ${user}, Age: ${age}`;
console.log(userInfo); // "User: Bob, Age: 30"

Пример с выражениями

				
					let quantity = 3;
let unitPrice = 2;
let totalPrice = `Total: $${quantity * unitPrice}`;
console.log(totalPrice); // "Total: $6"

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

				
					let address = `123 Main Street
Springfield, USA
12345`;
console.log(address);

Распространенные ошибки

Использование неправильных кавычек

				
					let name = 'Alice';
// let message = "Hello, ${name}!"; // Ошибка: используется не шаблонный литерал

Правильный вариант

				
					let name = 'Alice';
let message = `Hello, ${name}!`;

Пропущенные фигурные скобки

				
					let price = 10;
// let message = `The price is $price.`; // Ошибка: переменная не интерполируется

Правильный вариант

				
					let price = 10;
let message = `The price is $${price}.`;

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

				
					let city = 'New York';
// let message = 'Welcome to ${city}!'; // Ошибка: не используются шаблонные литералы

Правильный вариант

				
					let city = 'New York';
let message = `Welcome to ${city}!`;

Заключение

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

Тестовое задание

Создайте переменные firstName и lastName, и с их помощью сформируйте строку с полным именем.
Напишите функцию calculateTotal, которая принимает количество и цену, и возвращает строку с общей стоимостью, используя шаблонные литералы.
Создайте многострочную строку, содержащую адрес, и выведите её на консоль.

Пример решения:

				
					// Задание 1
let firstName = 'John';
let lastName = 'Doe';
let fullName = `Full name: ${firstName} ${lastName}`;
console.log(fullName); // "Full name: John Doe"

// Задание 2
function calculateTotal(quantity, price) {
  return `Total cost: $${quantity * price}`;
}

let totalCost = calculateTotal(5, 20);
console.log(totalCost); // "Total cost: $100"

// Задание 3
let address = `456 Elm Street
  Anytown, USA
  67890`;
console.log(address);

Этот урок поможет вам лучше понять, как использовать интерполяцию в JavaScript, и научит избегать распространенных ошибок при работе с шаблонными литералами.

Регистрация

Вход

Поиск

31. Интерполяция

Основные концепции

Примеры

Распространенные ошибки

Заключение

Тестовое задание