本文介绍如何在网页中通过 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 和纯空白字符串：
<html>
<body>
Hi there <span id="name"></span>!
</body>
</html>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const nameParam = urlParams.get('name');
// 安全提取：去除首尾空格后，若为空则 fallback 为 'Friend'
const name = nameParam?.trim() ?? '' ? nameParam.trim() : 'Friend';
document.getElementById("name").textContent = name;
</script>更简洁清晰的写法（推荐）：
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!”
这样既保证了逻辑严谨性，又提升了用户体验与代码可维护性。
