Svelte换行写内联条件时自动加空格，如何阻止该行为？

你在Svelte组件中尝试将{#if a}换行以提升代码可读性，但渲染后星号前会多出不必要的空格，以下是几种实用解决方法：

方法1：使用Svelte空白抑制语法 #

Svelte提供{-}语法专门用来抑制模板中的空白字符，在文本末尾添加{-}即可消除换行带来的空格：

<script>
    let a = true
    let b = false
</script>

<p>Hover over the asterisk at the end of this sentence to check boolean statuses.{-}
{#if a}
    <span title="a is true">*</span>
{:else if b}
    <span title="b is true">*</span>
{/if}
</p>

{-}会吃掉后续所有空白（包括换行和缩进），确保渲染后星号前无多余空格。

方法2：用无渲染标签隔离文本与条件块 #

使用Svelte的<text>标签（不会被渲染为实际DOM元素）分别包裹文本和条件块，避免空白被保留：

<script>
    let a = true
    let b = false
</script>

<p>
    <text>Hover over the asterisk at the end of this sentence to check boolean statuses.</text>
    {#if a}
        <span title="a is true">*</span>
    {:else if b}
        <span title="b is true">*</span>
    {/if}
</p>

方法3：紧凑起始标签写法 #

将{#if a}起始标签与文本放在同一行，后续内容换行缩进，既保证代码可读性，又不会产生多余空格：

<script>
    let a = true
    let b = false
</script>

<p>Hover over the asterisk at the end of this sentence to check boolean statuses.{#if a}
    <span title="a is true">*</span>
{:else if b}
    <span title="b is true">*</span>
{/if}
</p>

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