绑定中的轻微不一致

Question

我是 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() 方法适用于第一次加载，但在运行时使用输入框更新数字时不会格式化输出（带逗号）。

但是，即使在运行时更新 b，toLowerCase() 似乎也能正常工作。

我在这里错过了什么？

Answer 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'));

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

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

Answer 2

无不一致：输入值默认为字符串。 Svelte 不知道您期待返回一个数字，因此 binding a 在更新后将其转换为字符串（因为、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

绑定中的轻微不一致

Svelte inconsistency in binding

svelte-3