这是什么:在变量JS语法之后签名?

Question

我在查看库时在JS中遇到了以下有效语法svelte：

$: doubled = 6 * 2;

起初，我认为它是特定于库的，但它适用于 Chrome 控制台。这是什么语法？

它可以是任何东西：

name: something = 6 * 2;

Answer 1

任何 JavaScript 语句(除函数声明外的种类)都可以在前面加上一个标签：

foo: var x = 0;

你在那里得到的是这样的：

$: doubled = 6 * 2;

在您的陈述中，"$"是标签。

标记语句没有多大意义，因为JavaScript中没有goto。break和continue都可以包含封闭循环的标签，以指示应涉及多少"层"。

wholeLoop:
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
if (matrix[i][j] == null)
// Oh no! This is terrible
break wholeLoop;
}
}

MDN，规范

---

以上所有内容几乎都是正确的，但显然 Svelte 将自己的构建时预处理器应用于组件源代码，并将其转换为发送到浏览器的实际 JavaScript。标签语法的这种使用被他们"劫持"为意思;看到昆汀的回答。

Answer 2

这是JavaScript中的标签。

这里有趣的一点是Svelte如何使用它将变量绑定到其他变量。这是Rich Harris解释这一点的视频的一部分。

从本质上讲，在 Svelte 中，$:意味着每当这些值发生变化时重新运行

如果我们看一下 Svelte 的反应式声明示例中的示例，

<script>
let count = 1;
// the `$:` means 're-run whenever these values change'
$: doubled = count * 2;
$: quadrupled = doubled * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Count: {count}
</button>
<p>{count} * 2 = {doubled}</p>
<p>{doubled} * 2 = {quadrupled}</p>

变量doubled和quadrupled具有$标签。因此，当count或doubled分别发生变化时，将再次计算它们。

如果你看一下编译后的代码，你可以看到

let doubled, quadrupled;
$$self.$$.update = ($$dirty = { count: 1, doubled: 1 }) => {
if ($$dirty.count) { $$invalidate('doubled', doubled = count * 2); }
if ($$dirty.doubled) { $$invalidate('quadrupled', quadrupled = doubled * 2); }
};

因此，每次更新发生时，都会对这些变量进行脏检查并更新。

总之。$:中的 Svelte 与 JavaScript 标签没有任何关系。这是 Svelte 编译器的指令，用于更新这些变量的代码。$:当然是有效的语法，但在 Svelte 的上下文之外，它并没有做它在 Svelte 中所做的。正是编译起到了神奇的作用;)

Answer 3

在 JavaScript 中，它是一个标签，旨在将break和continue与嵌套循环结合使用时使用(因此您可以选择要中断或继续的循环)。

Svelte似乎使用某种黑客来赋予它另一种含义。请参阅教程：

Svelte 在组件状态时自动更新 DOM。 变化。通常，需要计算组件状态的某些部分 从其他部分(例如从名字派生的全名和 姓氏)，并在它们发生变化时重新计算。

对于这些，我们有反应性声明。它们看起来像这样：

let count = 0;
$: doubled = count * 2;

Answer 4

要为已提供的答案添加更多详细信息，请执行以下操作：

• 它本质上定义了Svelte中的"命运运算符"(命运运算符是"响应式编程"的一般概念)
• 命运运算符确保每当计算变量的值发生变化时都会更新变量)

Rich Harris(Svelte的创建者)不久前写了一篇关于命运运算符使用的文章，很好地解释了这个概念(尽管当时他没有特别建议使用$：

https://gist.github.com/Rich-Harris/aa3dc83d3d8a4e572d9be11aedc8c238

Answer 5

对于 Svelte.js 具体来说，$:将语句标记为"响应式"，这意味着它将根据随后的变量进行更新 - 正如其他人也写的那样，这是 JavaScript 中的标签，但在 svelte 中它具有特殊含义。