Svelte 最新中文文档翻译（8）—— @html、@const、@debug 模板语法

前言

Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。

目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。

我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

@html

要将原始 HTML 注入到组件中，请使用 {@html ...} 标签：

<article>  {@html content}</article>

[!NOTE] 请确保您要么转义传入的字符串，要么仅使用在您控制下的值来填充它，以防止 XSS 攻击。切勿渲染未经安全处理的内容。

表达式应该是有效的独立 HTML —— 以下示例将不起作用，因为 </div> 不是有效的 HTML：

{@html '<div>'}content{@html '</div>'}

它也不会编译 Svelte 代码。

样式

以这种方式渲染的内容对 Svelte 来说是"不可见的"，因此不会接收作用域样式 —— 换句话说，以下代码不会生效，a 和 img 样式将被视为未使用：

<article>  {@html content}</article>
<style>  article {    a { color: hotpink }    img { width: 100% }  }</style>

相反，使用 :global 修饰符来定位 <article> 内的所有内容：

<style>  article +++:global+++ {    a { color: hotpink }    img { width: 100% }  }</style>

@const

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

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

{@const} 只允许作为块（block）的直接子元素 — {#if ...}、{#each ...}、{#snippet ...} 等 — 或者 <Component />。

@debug

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

<script>  let user = {    firstname: 'Ada',    lastname: 'Lovelace'  };</script>
{@debug user}
<h1>Hello {user.firstname}!</h1>

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

<!-- 可以编译 -->{@debug user}{@debug user1, user2, user3}
<!-- 无法编译 -->{@debug user.firstname}{@debug myArray[0]}{@debug !isReady}{@debug typeof user === 'object'}

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

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。

系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。