Svelte中span元素空格处理差异问题咨询

Svelte编译器自带静态空白优化机制：

• 对于模板里静态书写的空白字符，如果某个元素的内容仅包含空白（比如你手动写的<span> </span>），编译器会自动移除这些无意义的空白，最终渲染出的是空<span>，所以不会显示空格，导致foo和bar直接连在一起。
• 而通过{#each}循环生成的元素，空格是来自数组的动态插值项（数组里的' '），属于动态生成的内容，Svelte不会对动态插值的空白做移除处理，因此这个空格会被完整保留，最终能正常显示出foo bar。

如果想让手动书写的空格不被优化，你可以改成动态插值的形式（比如<span>{' '}</span>），或者使用 ，也可以添加<!-- svelte-ignore whitespace -->注释来禁用该位置的空白优化。

内容的提问来源于stack exchange，提问作者Corrl