Svelte变量为何在HTML中可见？如何隐藏赋值代码输出？

• 问题根源：Svelte模板里的{}是插值语法，专门用来把表达式的结果输出到HTML页面上。你写的{((result = student.startDate.split("T")))}会先执行赋值操作，然后把赋值的返回值（也就是split得到的数组）直接渲染出来，这就是页面显示变量值的原因。

• 正确做法：把变量更新逻辑放到组件的<script>块里，不要写在模板的插值语法中：

  1. 初始化时处理（如果student是固定值）：

     <script>
       let student = { startDate: "2024-05-20T12:00:00" };
       let result;
       // 在这里完成赋值，不会被渲染到页面
       result = student.startDate.split("T");
     </script>
     
     <!-- 模板里只放需要显示的内容，不需要显示的变量不用写在这里 -->
     

  2. 响应式更新（如果student是会变化的响应式变量）：
     使用Svelte的响应式声明$:，当student.startDate变化时自动更新result：

     <script>
       let student = { startDate: "2024-05-20T12:00:00" };
       let result;
     
       // 当student.startDate变化时，自动执行这段代码
       $: if (student?.startDate) {
         result = student.startDate.split("T");
       }
     </script>
     

  3. 事件触发时更新：
     如果需要在点击按钮等动作后更新变量，把逻辑写到函数里：

     <script>
       let student = { startDate: "2024-05-20T12:00:00" };
       let result;
     
       function updateResult() {
         result = student.startDate.split("T");
       }
     </script>
     
     <button on:click={updateResult}>更新变量</button>
     

内容的提问来源于stack exchange，提问作者Carlos Gómez