{let/const ...}

声明标签(declaration tags)使用 constlet 在标记内部定义局部变量:

<!--- file: App.svelte --->
<script>
	let boxes = [{ width: 10, height: 10 }, { width: 15, height: 15 }];
</script>

{#each boxes as box}
	{const area = box.width * box.height}
	{const label = `${box.width} ⨉ ${box.height} = ${area}`}

	<p>{label}</p>
{/each}

[!NOTE] 声明标签自 Svelte 5.56 起可用。

[!NOTE] {@const ...} 语法被视为遗留语法——请改用声明标签。

当值需要具有响应性时,可以使用 $state$derived

<!--- file: App.svelte --->
<script>
	let user = $state({ name: 'Svelte' });
	let editing = $state(false);
</script>

<p>Hello {user.name}</p>
<button onclick={() => editing = true}>edit name</button>

{#if editing}
	{let name = $state(user.name)}
	{const greeting = $derived(`Hello ${name}`)}

	<hr>
	<input bind:value={name} />
	<p>{greeting}</p>

	<button onclick={() => {
		user.name = name;
		editing = false;
	}}>save</button>
{/if}

声明标签可以在组件内部的任何位置使用。它们可以引用自身之外声明的值(例如在 <script> 标签或 {#each ...} 块中),并且对同一个词法作用域内的所有内容都"可见"(即同级元素,以及这些同级元素的子元素):

<!--- file: App.svelte --->
{const hello = 'hello'}
{hello} <!-- 'hello' -->
<div>
	{const hello = 'hi'}
	{hello} <!-- 'hi' -->
	<div>
		{hello} <!-- 'hi' -->
	</div>
</div>
{hello} <!-- 'hello' -->