Разметка и выражения

Разметка компонента — обычный HTML, в который можно вставлять значения из JavaScript. Всё, что стоит в фигурных скобках, Svelte вычисляет и выводит на место скобок.

Выражения в тексте

В фигурных скобках может стоять любое выражение JavaScript: переменная, вызов функции, арифметика, тернарный оператор.

<!-- src/routes/+page.svelte -->
<script>
  let user = 'Анна';
  let todos = ['Купить хлеб', 'Позвонить Олегу'];
</script>
 
<h1>Задачи: {user.toUpperCase()}</h1>
<p>Всего задач: {todos.length}</p>
<p>{todos.length > 0 ? 'Есть дела' : 'Можно отдыхать'}</p>

На странице появятся «Задачи: АННА», «Всего задач: 2» и «Есть дела». Инструкции вроде if или for в скобках писать нельзя — только выражения. Для условий и циклов в Svelte есть отдельные блоки, о них будут уроки.

Значения в атрибутах

Выражение можно поставить и в атрибут — целиком или внутри строки:

<script>
  let avatar = '/anna.png';
  let size = 48;
</script>
 
<img src={avatar} alt="Аватар" width={size} />
<a href="/users/{size}">Профиль</a>

Картинка получит адрес /anna.png и ширину 48, ссылка — адрес /users/48. Картинку положите в папку static: файлы оттуда доступны от корня сайта.

Сокращённая запись

Если имя атрибута совпадает с именем переменной, можно написать только скобки:

<script>
  let src = '/anna.png';
  let alt = 'Аватар';
</script>
 
<img {src} {alt} />

Запись {src} равна src={src}. Это частый приём, особенно при передаче свойств компонентам.

HTML из строки

Обычные скобки экранируют текст: строка '<b>важно</b>' выведется вместе с угловыми скобками. Чтобы вставить готовый HTML, используют тег {@html ...}:

<script>
  let note = '<b>Важно:</b> сдать отчёт';
</script>
 
<p>{@html note}</p>

Слово «Важно:» станет жирным. Используйте {@html} только для HTML, которому доверяете: строка от пользователя может содержать вредный скрипт.

Частая ошибка

Писать выражения в двойных фигурных скобках по привычке из Vue или Angular: {{ user }}. В Svelte скобки одинарные — {user}. Двойные скобки Svelte разберёт как объект внутри выражения, и компилятор сообщит об ошибке.

Спасибо, что читаете!