17370845950

本文介绍如何在网页中通过 javascript 从 url 参数获取姓名，并在参数缺失或为空时自动显示友好默认值（如“friend”），确保页面始终呈现完整、友好的问候语。

在实际前端开发中，依赖 URL 参数动态渲染内容十分常见，但若参数未提供（如 domain.com）、为空（如 domain.com?name=）或仅含空白字符（如 domain.com?name=），直接使用 urlParams.get('name') 将返回 null、空字符串 "" 或空白字符串，导致页面显示为 “Hi there !”，体验不佳。

要实现健壮的回退逻辑，不能仅判断 !== null——因为 URLSearchParams.get() 在参数不存在时返回 null，但存在却为空值时返回 ""，而 null !== null 是 false，"" !== null 却为 true，因此仅靠 !== null 无法覆盖空字符串场景。

✅ 推荐做法：使用空值合并操作符（??）结合 trim()，兼顾 null、undefined 和纯空白字符串：

  
    Hi there !
  

更简洁清晰的写法（推荐）：

const name = (urlParams.get('name') || '').trim() || 'Friend';
document.getElementById("name").textContent = name;

? 解析该表达式：

• urlParams.get('name') || ''：将 null/undefined 转为空字符串；
• .trim()：移除首尾空格；
• || 'Friend'：若结果为 falsy（即 ''），则取 'Friend'。

? 最佳实践提示：

• 使用 .textContent 替代 .innerHTML（除非需渲染 HTML），避免 XSS 风险；
• 若需支持中文等多语言默认值，可封装为函数便于复用：

  function getQueryParam(name, fallback = 'Friend') {
    return (new URLSearchParams(window.location.search).get(name) || '').trim() || fallback;
  }
  document.getElementById("name").textContent = getQueryParam('name', '朋友');

✅ 最终效果：

• domain.com?name=Steve → “Hi there, Steve!”
• domain.com?name= 或 domain.com?name= → “Hi there, Friend!”
• domain.com（无参数）→ “Hi there, Friend!”

这样既保证了逻辑严谨性，又提升了用户体验与代码可维护性。