绑定中的 Svelte 不一致答案

【问题标题】：Svelte inconsistency in binding绑定中的 Svelte 不一致
【发布时间】：2021-06-15 07:53:16
【问题描述】：

我是 Svelte 的新手，正在使用绑定。

这是我的代码：

test.svelte

<script>
    let a = 1000000;
    let b = "ABCDeFgH";
</script>

A: <input bind:value={a} />
<br><br>
B: <input bind:value={b} />
<br>
<!-- works only on first run -->
<p>Formatted <strong>a</strong> is {a.toLocaleString("en-US")} </p>

<!-- works on update -->
<p>Formatted <strong>b</strong> is {b.toLowerCase()}</p>

a 上的 toLocaleString() 方法适用于第一次加载，但在运行时使用输入框更新数字时不会格式化输出（带逗号）。

然而，toLowerCase() 似乎工作正常，即使在运行时更新到 b。

我在这里错过了什么？

【问题讨论】：

标签： svelte-3

【解决方案1】：

最初它是一个数字：100000，但输入值是一个字符串 ("100000")，字符串的行为与 toLocaleString 不同。您可以通过 parseInt 或 parseFloat、Number 或其他任何方式运行它以将其转换回来：

console.log((100000).toLocaleString('en-US'));
console.log(("100000").toLocaleString('en-US'));
console.log((Number("100000")).toLocaleString('en-US'));

或者更好，如Connor points out，只需将输入类型设置为“数字”：

<input bind:value={a} type="number" />

【讨论】：

【解决方案2】：

无不一致：输入值默认为字符串。 Svelte 不会知道您期望返回一个数字，因此 binding a 在更新后将其转换为字符串（因为 @ray pointed out、toLocaleString 不会在字符串上产生相同的结果）。您可以通过在输入中指定 type="number" 来告诉 Svelte 期待一个数字：

<script>
    let a = 1000000;
</script>

A: <input bind:value={a} type="number" />

<p>Formatted <strong>a</strong> is {a.toLocaleString("en-US")} </p>

REPL

【讨论】：

哦，太好了。我尝试将输入类型设置为数字，但没有发现任何区别。也许我打错了，或者它没有刷新。刚刚又试了一次，是的，这行得通。