JavaScript函数默认参数无法生效问题求助

为什么默认参数不生效？ #

当输入框为空时，myName.value返回的是空字符串（""），而JS函数的默认参数仅在参数为undefined或是完全未传参时才会触发。空字符串属于有效的“假值”但并非undefined，所以函数会直接使用这个空字符串，导致显示Hello 。

两种解决方式 #

方式一：调用函数时判断处理 #

在点击事件里先对输入值做判断，若为空（或仅含空格），则不传参（或传undefined），让默认参数生效：

button.addEventListener('click', ()=>{
    // 去除首尾空格，避免输入空格也触发空的情况
    const inputVal = myName.value.trim();
    // 处理后的值为空就传undefined，否则传输入值
    sayHi(inputVal || undefined);
});

方式二：在函数内部处理 #

直接在sayHi函数里判断传入参数是否有效，这样无论怎么调用函数都能保证逻辑正确：

function sayHi(name){
    // 处理参数：若传入值为空/仅空格，就用'Stranger'，否则用传入值
    const displayName = (name || '').trim() || 'Stranger';
    h2.innerHTML = `Hello ${displayName}`;
}

这里用(name || '')避免未传参时name为undefined调用trim()报错，再通过trim()过滤纯空格的情况。

关于教程代码的疑问 #

你提到教程里相同代码能正常运行，大概率是教程演示中隐含了判断逻辑（可能你没注意到细节），或是演示场景中输入框的value并非空字符串。实际浏览器里输入框默认value就是空字符串，必须做额外判断才能触发默认参数。

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