Question

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

$: 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，spec

以上所有内容都非常正确，但是显然Svelte将其自己的构建时预处理器应用于组件源代码，并将其转换为发送给浏览器的实际JavaScript。标签语法的这种使用被他们“劫持”了一些意思。参见昆汀的答案。

Answer 2

在JavaScript中，它是label，旨在与嵌套循环一起使用break和continue时使用（因此，您可以选择要中断还是继续的循环）来自）。

斯维尔特（Svelte）似乎使用某种技巧来赋予它其他的含义。参见the tutorial：

当您的组件处于状态时，Svelte自动更新DOM   变化。通常，需要计算组件状态的某些部分   从其他部分（例如，从名字派生的全名和   姓氏），并在更改时重新计算。

对于这些，我们有反应式声明。他们看起来像这样：
let count = 0;
$: doubled = count * 2;

Answer 3

这是JavaScript中的标签。

这里有趣的一点是Svelte如何使用它将变量绑定到其他变量。 Here's a portion of a video where Rich Harris explains this。

实质上，在Svelte中， $: 表示只要这些值发生更改，便重新运行

如果我们看看斯维尔特（Svelte）的Reactive declarations example中的例子，

<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 4

为已提供的答案添加更多细节：

它实质上在Svelte中定义了“ destiny operator”（命运运算符是“反应式编程”的一般概念）
命运运算符确保每当从其计算出的值发生更改时就更新该变量）

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

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

Answer 5

特别是对于Svelte.js，$: Marks A Statement as 'reactive'表示它将根据随后的变量进行更新-正如其他人也写过的那样，这是javascript中的标签，但在svelte中，它具有特殊含义

这是什么：在可变的JS语法后签名？

5 个答案: