反应变量未在 Svelte 中显示正确的输出

Question

我认为这段代码应该做什么是很明显的，但输出并不像我预期的那样。

<script>
  let firstName = "first";
  let lastName = "last";
  let myColor = "orange";

  $: fullName = "${firstName} ${lastName}";
  $: console.log(myColor);
</script>

<main>
  <p>{fullName} - and he has a nice {myColor} shirt</p>
  <input type="text" bind:value={firstName} />
  <input type="text" bind:value={lastName} />
  <input type="text" bind:value={myColor} />
</main>

这是输出（没有输入槽）：

${firstName} ${lastName} - and he has a nice orange shirt

我不知道为什么它没有用 concat 变量替换 fullName。

Answer 1

您需要使用反引号 (template literals) 来连接这样的字符串。这有效：

$: fullName = `${firstName} ${lastName}`;

反应变量未在 Svelte 中显示正确的输出

The reactive variable is not displaying the right output in Svelte

string-concatenation

reactive

svelte