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 ...} 标签：

1.         {@html content}
2. </article>
3. </article>

复制代码

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

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

1. {@html ''}content{@html ''}

复制代码

它也不会编译 Svelte 代码。
样式

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

1.         {@html content}
2. </article>
3. </article>

复制代码

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

1. [/code][size=5]@const[/size]
3. {@const ...} 标签用于定义一个局部常量。
4. [code]{#each boxes as box}
5.         {@const area = box.width * box.height}
6.         {box.width} * {box.height} = {area}
7. {/each}

复制代码

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

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

1. {@debug user}
3. <h1>Hello {user.firstname}!</h1>

复制代码

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

1. {@debug user}
2. {@debug user1, user2, user3}
5. {@debug user.firstname}
6. {@debug myArray[0]}
7. {@debug !isReady}
8. {@debug typeof user === 'object'}

复制代码

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

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！