使用Svelte，我如何在HTML中摆脱花括号？ [英] Using Svelte, how can I escape curly braces in the HTML?

问题描述

我希望能够在我的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. 使用{'{'}和{'}'}(您已在执行的操作)

2. 使用{和}

   或{和}

   或{和}

3. 使用模板文字

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

Examples on svelte.dev's REPL (部分原因是我很难在这里转义字符，所以...)

---

GitHub上的主题讨论：

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

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

---

我在svelte.dev的REPL上的示例复制/粘贴在这里，以防它出了什么问题...

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<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>

这篇关于使用Svelte，我如何在HTML中摆脱花括号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！