本文介绍如何使用javascript安全、简洁地获取url中#号后的字符串（即hash值），并将其插入到html的`
在单页应用或轻量级页面交互中，常通过URL哈希（#后的内容）传递临时参数，例如 https://example.com/welcome.html#Alice。此时，我们希望将 Alice 提取出来，并渲染到页面中，如 <label>Welcome Alice</label>。
✅ 正确提取哈希值的方法
浏览器原生提供 location.hash 属性，它返回包含 # 的完整哈希字符串（如 #Alice）。要获取纯名称，需去掉开头的 #：
const name = location.hash.substring(1); // 推荐：更语义化，兼容性好 // 或 const name = location.hash.slice(1); // 简洁等效写法 // 注意：避免使用 substr(1)，因该方法已废弃且在空hash时可能出错
? 完整可运行示例
<!DOCTYPE html>
<html>
<head><title>Welcome Page</title></head>
<body>
<label id="welcomeLabel">Welcome <span id="userName"></span></label>
<script>
// 获取 hash 中的用户名（去除 #）
const hash = location.hash;
const userName = hash ? hash.slice(1) : 'Guest';
// 安全写入 DOM（防止 XSS，仅适用于可信来源；若hash来自用户输入，建议进一步校验）
document.getElementById('userName').textContent = userName;
</script>
</body>
</html>? 测试方式：直接在浏览器地址栏输入 your-page.html#Sarah，刷新后页面将显示 Welcome Sarah。
⚠️ 注意事项
- location.hash 在页面加载时即可访问，无需等待 DOMContentLoaded，但为保险起见，建议确保DOM元素已存在（如上例中先定义 <span id="userName"> 再执行脚本）。
- 若URL无哈希（如 ...html），location.hash 返回空字符串 ""，slice(1) 会返回空字符串，因此需提供默认值（如 'Guest'）。
- 安全性提醒：哈希内容可被用户任意修改，切勿直接用于权限判断或服务端逻辑；若需传递敏感信息，请改用查询参数（?name=）并配合后端验证。
掌握这一技巧，你就能轻松实现基于URL的轻量个性化展示——简洁、可靠、无需服务器参与。
