为什么 svelte 将花括号放在标量上？答案

【问题标题】：Why does svelte put curly braces on scalars?为什么 svelte 将花括号放在标量上？
【发布时间】：2021-06-19 21:55:16
【问题描述】：

例如这来自文档：

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

花括号在这里有什么作用？

【问题讨论】：

【解决方案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>

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

【讨论】：

你确定吗？我和其他人谈过这个问题，他们说它的作用是将其转换为数字类型，而如果没有花括号，它将被转换为字符串。
在这种情况下，您正在设置属性，所以没关系。你是对的，没有大括号你传递一个字符串，而大括号是一个数字。但是，在后台，它使用了浏览器的 setAttribute 函数，无论如何都会将参数转换为字符串。
但是，在某些情况下（例如自定义元素），您实际上是在设置元素的属性。在这种情况下，是否使用花括号很重要，因为类型很重要。例如，如果您有一个具有required 属性的<custom-button> 元素，则required={true} 和required="true" 是不同的。对于常规的 DOM 元素，您通常会设置属性，因此是否包含大括号没有效果。