{@html …}

  1. {@html 表达式}

在文本表达式中，像 < 和 > 这样的字符会被转义；然而，HTML 表达式则不会。

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

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

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

{@debug …}

  1. {@debug}
  1. {@debug 变量1, 变量2, ..., 变量N}

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

  1. <script>
  2.     let user = {
  3.         firstname: 'Ada',
  4.         lastname: 'Lovelace'
  5.     };
  6. </script>
  8. {@debug user}
  10. <h1>Hello {user.firstname}!</h1>

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

  1. <!-- 可编译 -->
  2. {@debug user}
  3. {@debug user1, user2, user3}
  5. <!-- 无法编译 -->
  6. {@debug user.firstname}
  7. {@debug myArray[0]}
  8. {@debug !isReady}
  9. {@debug typeof user === 'object'}

不带任何参数的 {@debug} 标签将插入一个 debugger 语句，当 任何 状态发生变化时触发，而不是指定的变量。

{@const …}

  1. {@const 分配}

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

  1. <script>
  2.     export let boxes;
  3. </script>
  5. {#each boxes as box}
  6.     {@const area = box.width * box.height}
  7.     {box.width} * {box.height} = {area}
  8. {/each}

{@const} 只允许作为 {#if}、{:else if}、{:else}、{#each}、{:then}、{:catch}、<Component /> 或 <svelte:fragment /> 的直接子元素使用。