JavaScript - Tagged Templates

Здравствуйте, будущие маги JavaScript! Сегодня мы отправимся в увлекательное путешествие в мир помеченных шаблонов (Tagged Templates). Не волнуйтесь, если вы никогда раньше о них не слышали - к концу этого урока вы будете помечать шаблоны, как профессионал!

Что такое помеченные шаблоны?

Пометченные шаблоны - это мощная функция, представленная в ES6 (ECMAScript 2015), которая позволяет вам анализировать шаблонные литералы с помощью функции. Теперь я знаю, что это может показаться немного пугающим, но подумайте о этом, как о предоставлении вашим шаблонным строкам суперсил!

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

Базовая синтаксика

Давайте начнем с базовой синтаксики:

function myTag(strings, ...values) {
// Ваше魔法 здесь
}

const result = myTag`Hello, ${name}!`;

В этом примере, myTag - это наша функция помеченного шаблона. Она принимает два типа аргументов:

1. Массив строковых литералов
2. Вставленные значения (те, что внутри ${})

Why Use Tagged Templates?

Вы можете задаваться вопросом: "Зачем мне возиться с помеченными шаблонами?" Ну, позвольте мне рассказать вам небольшую историю.

Жил-был молодой разработчик по имени Алекс. Алекс собирал приложение для messanging и хотел убедиться, что никто не может отправить вредоносный HTML в своих сообщениях. Помеченные шаблоны пришли на помощь! Алекс использовал их для santization входных данных пользователя и предотвращения потенциальных угроз безопасности.

Пометченные шаблоны super полезны для:

• Очищения входных данных пользователя
• Локализации (i18n)
• Оформления (например, в styled-components для React)
• И многое другое!

Примеры помеченных шаблонов

Давайте рассмотрим несколько примеров, чтобы увидеть помеченные шаблоны в действии!

Пример 1: Простой привет

function greet(strings, ...values) {
return `${strings[0]}${values[0].toUpperCase()}${strings[1]}`;
}

const name = "alice";
console.log(greet`Hello, ${name}!`);
// Вывод: Hello, ALICE!

В этом примере наша функция greet принимает имя и преобразует его в верхний регистр. Массив strings содержит ["Hello, ", "!"], а массив values содержит ["alice"].

Пример 2: Экранирование HTML

function safeHtml(strings, ...values) {
const escapeHtml = (str) => {
return str.replace(/&/g, "&")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
};

return strings.reduce((result, string, i) => {
return result + string + (values[i] ? escapeHtml(values[i]) : '');
}, '');
}

const userInput = '<script>alert("XSS attack!")</script>';
console.log(safeHtml`User input: ${userInput}`);
// Вывод: User input: &lt;script&gt;alert(&quot;XSS attack!&quot;)&lt;/script&gt;

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

Пример 3: Оформление с помощью помеченных шаблонов

function css(strings, ...values) {
return strings.reduce((result, string, i) => {
return result + string + (values[i] || '');
}, '');
}

const color = 'red';
const fontSize = '20px';

const styles = css`
color: ${color};
font-size: ${fontSize};
`;

console.log(styles);
// Вывод:
//   color: red;
//   font-size: 20px;

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

Продвинутые методы: помеченные шаблоны с методами

Пометченные шаблоны также могут иметь прикрепленные к ним методы. Давайте рассмотрим пример:

function currency(strings, ...values) {
const result = strings.reduce((acc, str, i) => {
return acc + str + (values[i] || '');
}, '');

return {
toString() {
return result;
},
USD() {
return '$' + result;
},
EUR() {
return '€' + result;
}
};
}

const amount = 100;
const formatted = currency`${amount}`;

console.log(formatted.toString()); // Вывод: 100
console.log(formatted.USD()); // Вывод: $100
console.log(formatted.EUR()); // Вывод: €100

В этом примере наша функция currency возвращает объект с методами, позволяющими гибко форматировать данные.

Заключение

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

Помните, как и любое мощное средство, помеченные шаблоны должны использоваться с умом. Они великолепны для конкретных случаев использования, таких как santization, internationalization или создание доменных языков, но для простой вставки строк, обычные шаблонные литералы часто suffice.

Теперь, когда вы узнали о помеченных шаблонах, почему бы не попробовать создать свои собственные? Начните с малого, может быть, с функции простого форматирования, и постепенно переходите к более сложным случаям использования. Удачи в программировании, будущие маги JavaScript!

Credits: Image by storyset