特殊標籤

在 GitHub 上編輯此頁面

{@html ...}固定連結

{@html expression}

在文字表達式中，字元例如 < 和 > 會被跳脫；然而，在 HTML 表達式中，它們不會。

表達式應為獨立的有效 HTML — {@html "<div>"}content{@html "</div>"} 無法運作，因為 </div> 不是有效的 HTML。它也不會編譯 Svelte 程式碼。

Svelte 在注入 HTML 前不會清除表達式。如果資料來自不受信任的來源，您必須清除它，否則會讓您的使用者暴露於 XSS 漏洞中。

<div class="blog-post">
	<h1>{post.title}</h1>
	{@html post.content}
</div>

{@debug ...}固定連結

{@debug}

{@debug var1, var2, ..., varN}

{@debug ...} 標籤提供 console.log(...) 的替代方案。它會在特定變數變更時記錄其值，並且在您開啟開發人員工具時暫停程式碼執行。

<script>
	let user = {
		firstname: 'Ada',
		lastname: 'Lovelace'
	};
</script>

{@debug user}

<h1>Hello {user.firstname}!</h1>

{@debug ...} 接受變數名稱的逗號分隔清單（非任意表達式）。

<!-- Compiles -->
{@debug user}
{@debug user1, user2, user3}

<!-- WON'T compile -->
{@debug user.firstname}
{@debug myArray[0]}
{@debug !isReady}
{@debug typeof user === 'object'}

沒有任何參數的 {@debug} 標籤會插入 debugger 陳述式，該陳述式會在 任何 狀態變更時觸發，而不是指定的變數。

{@const ...}固定連結

{@const assignment}

{@const ...} 標籤定義一個區域常數。

<script>
	export let boxes;
</script>

{#each boxes as box}
	{@const area = box.width * box.height}
	{box.width} * {box.height} = {area}
{/each}

{@const} 僅允許作為 {#if}、{:else if}、{:else}、{#each}、{:then}、{:catch}、<Component /> 或 <svelte:fragment /> 的直接子代。