Как сделать интерполяцию строк в TypeScript? Шаблонные строки

Использование шаблонных строк (template literals) в TypeScript

Да, вы абсолютно правы — в TypeScript (как и в современном JavaScript ES6+) для интерполяции строк используются шаблонные строки (template literals). Они работают "из коробки" и не требуют никаких дополнительных настроек компилятора. Ваш пример с обратными кавычками и ${} является правильным и будет работать без ошибок.

Основной синтаксис

Шаблонные строки заключаются в обратные кавычки (backticks) — символ ` (на русской клавиатуре обычно находится на одной клавише с буквой Ё). Внутри них можно вставлять любые выражения JavaScript/TypeScript с помощью синтаксиса ${выражение}.

let name: string = "Алексей";
let age: number = 25;

// Базовая интерполяция
let message: string = `Привет, меня зовут ${name} и мне ${age} лет.`;
console.log(message); // "Привет, меня зовут Алексей и мне 25 лет."

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

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

let a: number = 10;
let b: number = 5;

// Математические операции
console.log(`Сумма: ${a + b}`); // "Сумма: 15"
console.log(`Произведение: ${a * b}`); // "Произведение: 50"

// Вызов функций
function getGreeting(name: string): string {
    return `Добро пожаловать, ${name}!`;
}
let userName: string = "Мария";
console.log(`${getGreeting(userName)}`); // "Добро пожаловать, Мария!"

// Тернарный оператор
let isAdmin: boolean = true;
console.log(`Роль: ${isAdmin ? 'Администратор' : 'Пользователь'}`); // "Роль: Администратор"

// Вложенные шаблонные строки
let city: string = "Москва";
let country: string = "Россия";
console.log(`Город: ${`${city}, ${country}`}`); // "Город: Москва, Россия"

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

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

let multiLine: string = `Это первая строка.
Это вторая строка.
А это третья.`;

console.log(multiLine);
/* Вывод:
Это первая строка.
Это вторая строка.
А это третья.
*/

Типизация и TypeScript

TypeScript автоматически определяет тип результата интерполяции как string. Если вы используете переменные разных типов, они будут преобразованы в строку:

let id: number = 123;
let active: boolean = true;
let data: object = { key: "value" };

console.log(`ID: ${id}, Active: ${active}, Data: ${JSON.stringify(data)}`);
// "ID: 123, Active: true, Data: {"key":"value"}"

Практические советы

• Избегайте сложной логики внутри интерполяции — если выражение становится слишком длинным, лучше вынести его в отдельную переменную или функцию.
• Используйте для форматирования — шаблонные строки идеально подходят для создания сообщений, SQL-запросов, HTML-шаблонов и URL.
• Экранирование обратных кавычек — если нужно вывести сам символ обратной кавычки, используйте обратный слеш: \`.
• Производительность — в современных движках JavaScript шаблонные строки работают так же быстро, как и конкатенация, а часто даже быстрее.

Заключение

Интерполяция строк через шаблонные строки — это стандартный и рекомендуемый способ в TypeScript. Он делает код более читаемым, лаконичным и менее подверженным ошибкам по сравнению с конкатенацией через +. Начинайте использовать обратные кавычки везде, где нужно объединять строки с переменными — это современный стандарт.

function interpolate(template: string, ...args: any[]): string {
    return template.replace(/\{(\d+)\}/g, (match, index) => {
        return typeof args[index] !== 'undefined' ? args[index] : match;
    });
}

let name = "Ольга";
let age = 30;
let message = interpolate("Привет, {0}! Тебе {1} лет.", name, age);
console.log(message); // "Привет, Ольга! Тебе 30 лет."