Frontend | Вопросы собесов
🤔 Что такое шаблонные литералы, и для чего они нужны?
Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений.
🚩Примеры использования
🟠Интерполяция переменных и выражений
Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.
const name = 'Alice';
const age = 25;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.
🟠Многострочные строки
Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).
const multiLineString = `This is a string
that spans across
multiple lines.`;
console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.
🟠Встроенные выражения
Внутри шаблонных литералов можно использовать любые JavaScript-выражения.
const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;
console.log(result);
// Вывод: The sum of 5 and 10 is 15.
🟠Вызов функций внутри шаблонных литералов
Можно вызывать функции и методы внутри шаблонных литералов.
function toUpperCase(str) {
return str.toUpperCase();
}
const name = 'Alice';
const loudGreeting = `Hello, ${toUpperCase(name)}!`;
console.log(loudGreeting);
// Вывод: Hello, ALICE!
🟠Тегированные шаблонные литералы
Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.
function tag(strings, ...values) {
console.log(strings);
console.log(values);
return 'Tagged template';
}
const name = 'Alice';
const age = 25;
const taggedResult = tag`Name: ${name}, Age: ${age}`;
console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template
Ставь 👍 и забирай 📚 Базу знаний
9 · 1.1K ·