特殊标签

{@html ...}permalink

{@html expression}

在文本表达式中，像 < 和 > 这样的字符会被转义； 然而，对于 HTML 表达式来说，情况并非如此。

英In a text expression, characters like < and > are escaped; however, with HTML expressions, they're not.

表达式应该是有效的独立 HTML — {@html "<div>"}content{@html "</div>"} 不起作用，因为 </div> 不是有效的 HTML。 它也不会编译 Svelte 代码。

英The expression should be valid standalone HTML — {@html "<div>"}content{@html "</div>"} will not work, because </div> is not valid HTML. It also will not compile Svelte code.

Svelte 在注入 HTML 之前不会清理表达式。 如果数据来自不受信任的来源，你必须对其进行清理，否则你的用户就会面临 XSS 漏洞。

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

{@debug ...}permalink

{@debug}

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

{@debug ...} 标签提供了 console.log(...) 的替代方案。 当特定变量的值发生变化时，它会记录它们，并在打开开发工具时暂停代码执行。

英The {@debug ...} tag offers an alternative to console.log(...). It logs the values of specific variables whenever they change, and pauses code execution if you have devtools open.

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

{@debug user}

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

{@debug ...} 接受以逗号分隔的变量名称列表（不是任意表达式）。

英{@debug ...} accepts a comma-separated list of variable names (not arbitrary expressions).

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

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

不带任何参数的 {@debug} 标记将插入一条 debugger 语句，该语句在任何状态更改时都会触发，而不是指定的变量。

英The {@debug} tag without any arguments will insert a debugger statement that gets triggered when any state changes, as opposed to the specified variables.

{@const ...}permalink

{@const assignment}

{@const ...} 标签定义局部常量。

英The {@const ...} tag defines a local constant.

<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 /> 的直接子代。

英{@const} is only allowed as direct child of {#if}, {:else if}, {:else}, {#each}, {:then}, {:catch}, <Component /> or <svelte:fragment />.