Интерполяция: {expression}
Встраивайте выражения JavaScript непосредственно в HTML-шаблоны Svelte
«Интерполяция: {expression}» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Синтаксис фигурных скобок
Вставляйте любое выражение JavaScript в разметку, заключив его в фигурные скобки.
<p>Hello {name}!</p>Математика и строки
Выражения могут содержать не только имена переменных. Выполняйте вычисления, объединяйте строки или вызывайте методы.
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>Интерполяция атрибутов
Используйте тот же синтаксис внутри атрибутов HTML.
<img src={imageUrl} alt={altText} />Сокращённые атрибуты
Если атрибут и переменная имеют одинаковое имя, используйте сокращённую форму.
<img {src} {alt} />Логические атрибуты
Для логических атрибутов, например disabled, передайте любое истинное значение. Используйте непосредственно {flag}.
<button disabled={isLoading}>Save</button>Раскрытие атрибутов
Раскройте объект атрибутов в элемент с помощью синтаксиса {...obj}.
<input {...inputProps} />Текст и HTML
По умолчанию интерполяция экранирует HTML для безопасности. Используйте {@html ...} только для содержимого, которому Вы доверяете.
<div>{@html trustedHtml}</div>Условные выражения
Для простого ветвления внутри фигурных скобок можно использовать тернарные выражения.
<p>Status: {isOnline ? "online" : "offline"}</p>Null и Undefined
Если результатом выражения является null или undefined, Svelte ничего не отображает.
Вызовы функций
Вызывайте функции внутри фигурных скобок, но следите, чтобы они выполнялись быстро. Они запускаются заново при каждом реактивном обновлении.
<p>Total: {formatCurrency(amount)}</p>Комментарии
Используйте обычные комментарии HTML. Они не появляются в отображаемом результате.
<!-- This is a comment -->Быстрая проверка
Как безопасно вставить текст?
Итоги
Одиночные фигурные скобки вставляют любое выражение в текст и атрибуты, а сокращённая форма и раскрытие атрибутов делают запись удобнее.
Часто задаваемые вопросы
Урок «Интерполяция: {expression}» бесплатный?
Да — полный текст урока «Интерполяция: {expression}» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Интерполяция: {expression}»?
Встраивайте выражения JavaScript непосредственно в HTML-шаблоны Svelte Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Интерполяция: {expression}»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Структура из шаблонов script и style
- Реактивные переменные с let
- Интерполяция: {expression}
- Вычисляемые значения: реактивные объявления $: