JavaScript Academy · Урок

Практические сценарии применения шаблонных тегов

Создавайте безопасные HTML-строки и стилизованные строки с помощью тегов.

«Практические сценарии применения шаблонных тегов» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Теги в реальных проектах

Теговые шаблоны лежат в основе многих библиотек: экранирования HTML, стилизованных компонентов, запросов GraphQL и интернационализации. Общая идея заключается в перехвате интерполированных значений для их безопасной обработки.

function tag(s, ...v) { return s[0] + v[0] + s[1] }
console.log(tag(["<", ">"], "b"))

Проблема экранирования

При создании HTML из пользовательских данных специальные символы, например знак «меньше», могут внедрить разметку. Теговая функция может автоматически экранировать эти символы только в интерполированных значениях.

const danger = "<script>"
console.log("raw: " + danger)

Вспомогательная функция экранирования

Сначала определим вспомогательную функцию, которая заменяет опасные символы безопасными HTML-сущностями.

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
}
console.log(escapeHtml("<b>"))

Безопасный тег HTML

Теперь создадим тег, который экранирует каждое интерполированное значение, но оставляет статические части шаблона без изменений, поскольку они написаны разработчиком, которому можно доверять.

function escapeHtml(str) {
  return String(str).replace(/</g, "&lt;").replace(/>/g, "&gt;")
}
function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? escapeHtml(values[i]) : "")
  })
  return out
}
console.log(safe(["<p>", "</p>"], "<script>"))

Почему статические части остаются необработанными

Только интерполированные значения представляют собой ненадёжные данные пользователя. Литеральные части шаблона написаны разработчиком, поэтому они остаются неэкранированными, чтобы задуманная разметка продолжала работать.

function safe(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const safer = values[i] !== undefined ? String(values[i]).replace(/</g, "&lt;") : ""
    out += s + safer
  })
  return out
}
console.log(safe(["<b>", "</b>"], "<i>x</i>"))

Тег форматирования вывода

Другой подход заключается в том, чтобы оборачивать интерполированные значения в маркеры форматирования, например для выделения чисел в отчёте.

function money(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? "$" + Number(values[i]).toFixed(2) : "")
  })
  return out
}
console.log(money(["Total: ", ""], 9.5))

Формирование строк запросов

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

function url(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    out += s + (values[i] !== undefined ? encodeURIComponent(values[i]) : "")
  })
  return out
}
console.log(url(["/search?q=", ""], "a b&c"))

Образование множественного числа

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

function plural(strings, count) {
  const noun = count === 1 ? "item" : "items"
  return strings[0] + count + " " + noun
}
console.log(plural(["You have "], 1))
console.log(plural(["You have "], 3))

Удаление отступов

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

function dedent(strings) {
  return strings[0].split("\n").map(function (l) { return l.trim() }).join("\n")
}
console.log(dedent(["  a\n  b\n  c"]))

Композиция тегов

Вы можете поэтапно добавлять поведение, поручая одному тегу вызывать вспомогательные функции. В этом примере тег одновременно оборачивает значения и выделяет их.

function emph(strings, ...values) {
  let out = ""
  strings.forEach(function (s, i) {
    const v = values[i] !== undefined ? "**" + values[i] + "**" : ""
    out += s + v
  })
  return out
}
console.log(emph(["Note: ", "!"], "important"))

Когда не следует использовать теги

Для простых строк достаточно обычного шаблонного литерала. Используйте теговую функцию только тогда, когда необходимо единообразно преобразовывать интерполированные значения, например при экранировании или локализации.

const name = "Lee"
console.log("Welcome, " + name)

Быстрая проверка

Проверьте свои практические знания о тегах.

Повторение

Повторение: Теговые шаблоны позволяют безопасно форматировать вывод.

Для безопасности HTML экранируйте только интерполированные значения
Статические части остаются доверенными и raw
Используйте теги для стилизации, кодирования и образования множественного числа
Если преобразование не требуется, отдавайте предпочтение обычным литералам

function safe(s, v) { return s[0] + String(v).replace(/</g, "&lt;") }
console.log(safe(["x="], "<a>"))

Часто задаваемые вопросы

Урок «Практические сценарии применения шаблонных тегов» бесплатный?

Да — полный текст урока «Практические сценарии применения шаблонных тегов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Практические сценарии применения шаблонных тегов»?

Создавайте безопасные HTML-строки и стилизованные строки с помощью тегов. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Практические сценарии применения шаблонных тегов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Основы интерполяции строк
Многострочные строки
Функции с шаблонными тегами
Практические сценарии применения шаблонных тегов

← Назад к JavaScript Academy