Используя Svelte, как я могу избежать фигурных скобок в HTML?

Question

Я хочу показать пример кода в моем компоненте Svelte, но в этом примере есть фигурные скобки, т.е.

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

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

Обратите внимание, что функция имеет фигурные скобки? Кажется, это сбивает с толку компилятор Svelte. Есть ли способ избежать других, кроме этого?

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

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

Answer 1

Я знаю 3 способа избежать фигурных скобок в Svelte:

1. Использование {'{'} и {'}'} (что вы уже делаете)

2. Использование { и }

   или { и }

   или { и }

3. Использование литералов шаблона

   Вы можете заключить весь код в литерал шаблона.

Примеры в REPL * svelte.dev (Отчасти потому, что Мне трудно сбежать от символов здесь, на SO ...)

---

Обсуждения по теме на GitHub:

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

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

---

Мой пример на REPL svelte.dev скопирован / вставлен здесь на случай, если с ним что-нибудь случится ...

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

Заключение всего блока кода в строковый литерал

  {`
  function test(e) {
    console.log(e)
  }
  `}

Использование {и}

  function test(e) {
    console.log(e)
  }