Функции с шаблонными тегами
Обрабатывайте части шаблонов с помощью функций-тегов.
«Функции с шаблонными тегами» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Что такое функция-тег
Шаблон с тегом — это вызов функции, в котором имя функции помещается непосредственно перед шаблонным литералом. Функция получает разобранные части шаблона и может преобразовать их.
function tag(strings, value) {
return strings[0] + value.toUpperCase() + strings[1]
}
console.log(tag(["Hi ", "!"], "bob"))Массив строк
Первый аргумент, который получает функция-тег, — это массив буквальных частей строки. Это фрагменты текста, расположенные между заполнителями и по краям от них.
function tag(strings) {
return strings.join("|")
}
console.log(tag(["a", "b", "c"]))Значения
После массива строк функция-тег получает каждое интерполированное значение как отдельный аргумент. Остаточные параметры собирают их в массив.
function tag(strings, ...values) {
return values.join(",")
}
console.log(tag(["", " and ", ""], "x", "y"))Повторная сборка строки
Обычно функция-тег проходит по массиву строк и вставляет каждое значение между частями, заново собирая итоговую строку с нужным преобразованием.
function tag(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] : "")
})
return out
}
console.log(tag(["A", "B", "C"], 1, 2))Правило длины массива строк
Массив строк всегда содержит ровно на один элемент больше, чем массив значений. Текст есть и перед первым заполнителем, и после последнего, даже если некоторые части пусты.
function tag(strings, ...values) {
return "strings=" + strings.length + " values=" + values.length
}
console.log(tag(["", "", ""], 1, 2))Преобразование значений
Поскольку функция-тег управляет способом вставки значений, их можно форматировать. Здесь каждое числовое значение перед вставкой удваивается.
function dbl(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? values[i] * 2 : "")
})
return out
}
console.log(dbl(["", " ", ""], 3, 4))Возврат нестроковых значений
Функция-тег не обязана возвращать строку. Она может вернуть любое значение, например объект или массив, созданный из частей шаблона.
function parts(strings, ...values) {
return { strings: strings, values: values }
}
const r = parts(["a", "b"], 9)
console.log(r.values[0])Свойство raw
Массив строк также содержит свойство raw, в котором хранятся строки без обработки управляющих последовательностей. Именно так работает String.raw.
console.log(String.raw({ raw: ["a\\n", "b"] }, "X"))Преобразование интерполяций в верхний регистр
Один из распространённых демонстрационных тегов переводит каждое интерполированное значение в верхний регистр, оставляя статический текст без изменений.
function loud(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? String(values[i]).toUpperCase() : "")
})
return out
}
console.log(loud(["name is ", "."], "alice"))Зачем нужны теги
Теговые функции позволяют использовать мощные шаблоны: экранирование ненадёжных входных данных, интернационализацию, построение запросов к базе данных и пользовательское форматирование — всё это определяется структурой шаблона.
function highlight(strings, ...values) {
let out = ""
strings.forEach(function (s, i) {
out += s + (values[i] !== undefined ? "[" + values[i] + "]" : "")
})
return out
}
console.log(highlight(["score: ", " pts"], 42))Игнорирование значений
Тег может полностью игнорировать интерполированные значения и формировать вывод только на основе статических частей; это полезно для анализа или ведения журнала.
function onlyStatic(strings) {
return strings.filter(function (s) { return s.length > 0 }).join(" ")
}
console.log(onlyStatic(["Hello ", " world ", ""]))Быстрая проверка
Проверьте свои знания о теговых функциях.
Повторение
Повторение: Теговые шаблоны вызывают функцию с разобранными частями шаблона.
- Первый аргумент — массив строк
- Остальные аргументы — интерполированные значения
- В массиве строк на один элемент больше, чем в массиве значений
- Свойство raw содержит необработанный текст
function tag(s, ...v) { return s[0] + v[0] }
console.log(tag(["go "], "fast"))Часто задаваемые вопросы
Урок «Функции с шаблонными тегами» бесплатный?
Да — полный текст урока «Функции с шаблонными тегами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Функции с шаблонными тегами»?
Обрабатывайте части шаблонов с помощью функций-тегов. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Функции с шаблонными тегами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы интерполяции строк
- Многострочные строки
- Функции с шаблонными тегами
- Практические сценарии применения шаблонных тегов