svelte-3 - 绑定(bind)中的细微不一致

Question

我是 Svelte 新手，正在使用绑定(bind)。

这是我的代码:

REPL

测试.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'));

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

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