使用 Svelte，如何在 HTML 中转义大括号？答案

【问题标题】：Using Svelte, how can I escape curly braces in the HTML?使用 Svelte，如何在 HTML 中转义大括号？
【发布时间】：2020-07-20 04:15:22
【问题描述】：

我希望能够在我的 Svelte 组件中显示一个代码示例，但该示例有花括号，即

<script>
//no JS needed
</script>

<p>Here's a sample function</p>
<pre><code>
  function test(e) {
    console.log(e)
  }
</code></pre>

注意到函数有花括号了吗？这似乎使 Svelte 编译器感到困惑。除了这个，还有什么办法可以逃脱吗？

<script>
//no JS needed
</script>

<p>Here's a sample function</p>
<pre><code>
  function test(e) {'{'}
    console.log(e)
  {'}'}
</code></pre>

【问题讨论】：

标签： svelte

【解决方案1】：

我知道在 Svelte 中转义花括号的 3 种方法：

使用{'{'} 和{'}'}（你已经在做什么）
使用&#123; 和&#125;

或&lbrace;和&rbrace;

或&lcub; 和&rcub;
使用模板文字

您可以将整个代码包装在模板文字中。

Examples on svelte.dev's REPL （部分原因是我很难在 SO 上转义字符...）

GitHub上关于该主题的讨论：

https://github.com/sveltejs/svelte/issues/2924

https://github.com/sveltejs/svelte/issues/1318

我在 svelte.dev 的 REPL 复制/粘贴上的示例，以防万一它发生意外...

<h3>Escaping every curly brace</h3>
<pre><code>
  function test(e) {'{'}
    console.log(e)
  {'}'}
</code></pre>


<h3>Wrapping the whole code block in a string literal</h3>
<pre><code>
  {`
  function test(e) {
    console.log(e)
  }
  `}
</code></pre>


<h3>Using &#123; and &#125;</h3>
<pre><code>
  function test(e) &#123;
    console.log(e)
  &#125;
</code></pre>

【讨论】：