HTML: Препроцессор Pug
2026-02-26 23:18 Diff
https://ru.hexlet.io/courses/html-pug/lessons/javascript/theory_unit

Pug позволяет использовать JavaScript для придания логики шаблону. В курсе по SASS мы рассматривали множество вариантов создания дополнительной логики: переменные, функции, циклы, условные конструкции. JavaScript внутри Pug позволяет делать всё то же самое, но немного с другим синтаксисом и особенностями. Это очень важная часть работы с шаблонизатором, которая позволяет раскрыть его на все сто процентов.

Если вы совсем не знакомы с тем, как работает и выглядит JavaScript, то можете пройти вводный курс Введение в программирование. В нём вы узнаете об основных конструкциях языка.

Весь JavaScript код внутри препроцессора можно разделить на три основные группы:

  1. Буферизованный код
  2. Неэкранированный буферизованный код
  3. Небуферизованный код

За этими страшными словами стоят простые концепции. Разберём каждую из них в отдельности.

Небуферизованный код

Отличительная особенность небуферизованного кода — отсутствие вывода в конечном HTML. Любой код, который написан в таком стиле не добавит в итоговый код ни единой строчки кода — он нужен для создания дополнительной логики внутри препроцессора. Это могут быть переменные, массивы, циклы и так далее. Для создания небуферизованного кода используется символ - после которого добавляется JavaScript код.

Создадим переменную с текстом и добавим её в параграф:

Интерполяция переменных и выражений

Для вывода значения переменной в прошлом примере использовалась конструкция h1 #{title}. Это важная часть синтаксиса Pug. Конструкция #{} выводит содержимое переменной или значение выражения в виде строки.

Особенность интерполяции — экранирование HTML-тегов. Вместо них используются специальные символы-мнемоники. Это сделано в целях безопасности — при выводе тегов «как есть» высока вероятность подстановки нежелательных тегов.

Pug предоставляет возможность изменить это поведение и выводить неэкранированные символы. Для этого используется конструкция !{}, но будьте аккуратны — использование такого кода является потенциальной проблемой, особенно при получении данных от пользователя.

Буферизованный код

Если небуферизованный код не взаимодействует напрямую с вёрсткой, то задача буферизованного кода — обработать JavaScript и подставить результат в вёрстку. Не бойтесь — на практике понять разницу намного проще. Буферизованный код начинается с символа =.

Как и в случае с интерполяцией, Pug экранирует весь HTML при использовании буферизованного вывода для обеспечения безопасности.

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

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

  • Небуферизованный код удобно использовать при создании функций, массивов, объектов.
  • Буферизованный код чаще всего используется при создании однострочных функций или строк, которые состоят только из JavaScript кода

Дополнительное задание

Используя знания из курса Введение в программирование создайте переменную со счётчиком и, с помощью цикла, увеличивайте его на два. Результаты запишите в виде списка. Количество итераций выберите самостоятельно. Определите, где будет буферизованный и небуферизованный код.

Примерный результат: