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

Вопрос

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

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• Шаблонные литералы — это синтаксис в ES6 для создания строк с использованием обратных кавычек ( ).
• Позволяют встраивать выражения через ${expression}, что упрощает интерполяцию переменных.
• Поддерживают многострочные строки без необходимости использования спецсимволов (\n).
• Можно использовать тегированные шаблоны для кастомной обработки строк (например, санитизация или локализация).

Подробный ответ

Шаблонные литералы — это синтаксис в ES6, который позволяет создавать строки с использованием обратных кавычек ( ). Они предоставляют более гибкий и удобный способ работы со строками по сравнению с обычными кавычками ("" или ''). Одним из ключевых преимуществ шаблонных литералов является возможность встраивать выражения прямо в строку через синтаксис ${expression}. Это называется интерполяцией переменных и значительно упрощает создание динамических строк. Например, вместо сложной конкатенации строк и переменных, можно просто вставить переменные в строку с помощью ${}. Шаблонные литералы также поддерживают многострочные строки без необходимости использования специальных символов, таких как \n. Это делает код более читаемым и удобным для работы с длинными текстами. Кроме того, шаблонные литералы поддерживают тегированные шаблоны, которые позволяют кастомно обрабатывать строки, например, для санитизации или локализации. Тегированные шаблоны — это функции, которые принимают строку и встроенные выражения, что открывает широкие возможности для работы с текстом.

Практические примеры

Пример 1

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

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Вывод: Hello, John!

Пример 2

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

const multiLine = `This is a

multi-line

string.`;
console.log(multiLine); // Вывод: This is a

multi-line string.

Пример 3

Пример тегированного шаблона:

function tag(strings, ...values) {
  return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '');
}
const name = 'John';
const age = 30;
const result = tag`Name: ${name}, Age: ${age}`;
console.log(result); // Вывод: Name: John, Age: 30

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

• Ошибка: Использование обычных кавычек вместо обратных для шаблонных литералов. Например, const greeting = 'Hello, ${name}!'; не будет работать, так как интерполяция работает только с обратными кавычками.
• Ошибка: Неправильное использование синтаксиса ${} в обычных строках. Например, const greeting = 'Hello, ${name}!'; не интерполирует переменную name, а просто выведет строку 'Hello, ${name}!'.

Связанные темы

• Интерполяция переменных в JavaScript
• Тегированные шаблоны в ES6
• Работа со строками в JavaScript
• ES6 синтаксис и его особенности

Follow-up вопросы

Чем шаблонные литералы отличаются от обычных строк?

Уровень: basic

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

Как работает интерполяция переменных в шаблонных литералах?

Уровень: intermediate

Интерполяция переменных происходит через конструкцию ${expression}, где выражение внутри фигурных скобок вычисляется и вставляется в строку.

Что такое тегированные шаблонные литералы и для чего они используются?

Уровень: advanced

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

Можно ли использовать шаблонные литералы для создания многострочных строк?

Уровень: basic

Да, шаблонные литералы поддерживают многострочные строки без необходимости использования спецсимволов, таких как \n.

Какие ограничения есть у шаблонных литералов?

Уровень: intermediate

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