为什么 svelte 在标量上加上花括号？

Question

例如这来自文档：

<canvas
    width={32}
    height={32}
></canvas>

花括号在这里有什么用？

Answer 1

在您展示的示例中，这没有什么不同。以下是等价的。

<canvas width={32} height={32}></canvas>
<canvas width="32" height="32"></canvas>

但是，使用大括号会导致 Svelte 将其解释为 JavaScript 表达式。这意味着您可以在花括号内进行数学运算...

<canvas width={32 + 8} height={32 - 8}></canvas>

...或将其换成变量。

<script>
  let size = 40;
</script>

<canvas width={size} height={size}></canvas>

始终编写花括号意味着如果您想稍后使值动态化，它可以节省几次击键，但不会影响组件的呈现方式。

Why does svelte put curly braces on scalars?