SvelteKit中点击调用addToast报错，console.log正常的原因排查

我参考Svelte官方教程实现Toast消息组件，需要在点击提交按钮时将form的message绑定到addToast方法。观察以下两行按钮代码：

<button on:click={console.log(form?.message)}>Login</button>
<button on:click={() => addToast({ form?.message })}>Login</button>

两者写法差异极小，但第一个按钮代码可正常运行，第二个却提示“form是意外标记”的错误。以下是addToast方法的实现代码：

import { writable } from "svelte/store";

export const toasts = writable([]);

export const addToast = (toast) => {
    const id = Math.floor(Math.random() * 5000);

    const defaults = {
        id,
        type: 'success',
        dismissible: true,
        timeout: 5000
    };

    toasts.update((all) => [{ ...defaults, ...toast}, ...all]);

    if (toast.timeout) setTimeout(() => dismissToast(id), toast.timeout);
}

export const dismissToast = (id) => {
    toasts.update((all) => all.filter(t => t.id !== id ));
}

核心差异与错误原因 #

1. 语法合法性区别 #

• 第一行代码中，console.log(form?.message)是标准的函数调用表达式，form?.message作为函数参数是合法的可选链用法，因此语法上没有问题。但要注意：这行代码会在组件渲染时就执行一次console.log，点击按钮时因为绑定的是console.log的返回值（undefined），所以不会触发任何点击动作——你看到的“正常运行”其实是渲染时的打印，而非点击时的响应。
• 第二行代码的问题出在{ form?.message }这个对象字面量上：JS的对象属性简写仅支持单纯的标识符（比如{ message }等价于{ message: message }），而form?.message是一个包含可选链的复杂表达式，不是合法的标识符，因此JS引擎无法解析这个对象字面量，直接抛出“form是意外标记”的语法错误。

2. 正确写法 #

如果想把form的message作为toast的内容传递给addToast，需要明确指定对象的属性名：

<button on:click={() => addToast({ message: form?.message })}>Login</button>

这样就创建了一个包含message属性的对象，属性值为form?.message，符合JS语法规范，也能匹配addToast方法对参数的期望。

另外，如果你希望第一行代码实现点击按钮时才打印的效果，正确写法应该和第二行的结构对齐，用箭头函数包裹：

<button on:click={() => console.log(form?.message)}>Login</button>

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