本文详细讲解如何在 JavaScript 中安全、可靠地将动态变量（如月份、年份）注入重定向 URL，重点解决因协议缺失导致的相对路径跳转失败问题，并提供完整可运行示例与最佳实践建议。
在日常开发中，使用 JavaScript 动态拼接跳转 URL 是非常常见的场景，尤其是在制作日历、报表等需要根据当前日期进行页面跳转的功能时。然而，很多开发者都会遇到这样的问题：代码逻辑看起来没问题，但跳转要么指向错误地址，要么完全没有反应。问题的根源往往并非语法错误，而是 URL 构造本身隐藏了一个陷阱——协议缺失。
? 关键问题：协议缺失导致相对路径跳转
假设你编写了如下代码：
const myUrl = `www.somewhere.com/events.htm?pageComponentId=1234&month=${m}&year=${y}`;
这段代码看起来没有明显错误，但请注意，这个字符串缺少了协议部分（https:// 或 https://）。浏览器会将其视为相对路径来处理。例如：
- 当前页面位于
https://example.com/dashboard/，执行location.assign("www.somewhere.com/...")实际跳转到的地址是：
https://example.com/www.somewhere.com/events.htm?...—— 这显然不是预期目标。
✅ 解决方案其实非常简单：显式添加协议，将域名和路径写完整，构成绝对 URL。
✅ 正确写法（推荐使用 HTTPS）
? 提示：
window.location.assign()与document.location.assign()功能等价，但window.location是更标准、更明确的引用方式；现代实践中推荐使用window.location.href = myUrl（更简洁）或window.location.replace(myUrl)（不保留当前页在历史栈中，避免用户点击「返回」时回到空白或错误页面）。
?️ 进阶建议：增强代码的健壮性与安全性
月份标准化处理（避免出现 0 月问题）
const m = String(currentDate.getMonth() + 1).padStart(2, '0'); // → "03" 而非 3
对关键参数进行 URL 编码（防止特殊字符破坏 URL 结构）
const encodedMonth = encodeURIComponent(m); const encodedYear = encodeURIComponent(y); const myUrl = `https://www.somewhere.com/events.htm?pageComponentId=1234&month=${encodedMonth}&year=${encodedYear}`;跳转前校验 URL 格式（可选防御性检查）
if (!myUrl.startsWith('https://') && !myUrl.startsWith('https://')) { console.error('Invalid redirect URL: missing protocol'); throw new Error('Redirect URL must include https:// or https://'); }
✅ 总结
- ❌ 错误写法：
"www.example.com/path"→ 触发相对路径跳转，导致误定向 - ✅ 正确写法：
"https://www.example.com/path"→ 触发绝对 URL 跳转，精准到达目标 - ✅ 推荐使用
window.location.replace(url)替代assign()，避免在历史记录中留下无效页面 - ✅ 对动态参数执行
encodeURIComponent()编码，提升兼容性与安全性，防止注入风险
只要确保 URL 字符串符合标准格式（协议 + 域名 + 路径），JavaScript 变量就能安全、灵活地用于页面重定向场景，彻底规避因协议缺失引发的跳转异常。
