3.1 Вложенные выражения
В шаблонных литералах можно использовать любые выражения, включая вызовы функций, тернарные операторы и шаблонные литералы внутри шаблонных литералов.
Пример:
В выражении ${a + b} выполняется математическая операция, и результат вставляется в строку result.
const a = 5;
const b = 10;
const result = `The result of ${a} + ${b} is ${a + b}.`;
console.log(result); // "The result of 5 + 10 is 15."
3.2 Вложенные шаблонные литералы
Шаблонные литералы могут быть вложены, что позволяет создавать сложные строки.
Пример:
Вызов метода greet() объекта user вложен в шаблонный литерал message.
const user = {
name: 'Bob',
age: 25,
greet() {
return `Hello, ${this.name}!`;
}
};
const message = `${user.greet()} You are ${user.age} years old.`;
console.log(message); // "Hello, Bob! You are 25 years old."
3.3 Тегированные шаблонные литералы (Tagged Templates)
Тегированные шаблонные литералы позволяют вызывать функцию для обработки шаблонных строк. Это дает возможность выполнять дополнительные манипуляции со строками, такие как интернационализация, безопасная вставка HTML и т. д.
Синтаксис:
function tag(strings, ...values) {
// обработка строк и значений
return результат;
}
const result = tag`Шаблонная строка с ${переменная}`;
Пример:
Функция highlight() обрабатывает строки и значения, оборачивая значения в HTML-теги <span> с классом highlight.
function highlight(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${values[i] || ''}`, '');
}
const name = 'Carol';
const hobby = 'painting';
const message = highlight`My name is ${name} and I love ${hobby}.`;
console.log(message);
// My name is Carol and I love painting.
3.4 Безопасная вставка значений
Шаблонные литералы помогают избежать некоторых распространенных проблем с безопасностью, таких как XSS (межсайтовый скриптинг), путем безопасной вставки значений. Это особенно полезно при вставке данных пользователя в HTML.
Пример:
Функция safeHTML() заменяет опасные символы в значениях, предотвращая XSS-атаки.
function safeHTML(strings, ...values) {
return strings.reduce((result, str, i) =>
`${result}${str}${String(values[i]).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')}`, '');
}
const userInput = '<script>alert("XSS")</script>';
const message = safeHTML`User input: ${userInput}`;
console.log(message);
// "User input: <script>alert("XSS")</script>"
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ