JavaScript页面跳转：变量构建URL的正确方法

本文详细讲解如何在 JavaScript 中安全、可靠地将动态变量（如月份、年份）注入重定向 URL，重点解决因协议缺失导致的相对路径跳转失败问题，并提供完整可运行示例与最佳实践建议。

在日常开发中，使用 JavaScript 动态拼接跳转 URL 是非常常见的场景，尤其是在制作日历、报表等需要根据当前日期进行页面跳转的功能时。然而，很多开发者都会遇到这样的问题：代码逻辑看起来没问题，但跳转要么指向错误地址，要么完全没有反应。问题的根源往往并非语法错误，而是 URL 构造本身隐藏了一个陷阱——协议缺失。

? 关键问题：协议缺失导致相对路径跳转

假设你编写了如下代码：

const myUrl = `www.somewhere.com/events.htm?pageComponentId=1234&month=${m}&year=${y}`;

这段代码看起来没有明显错误，但请注意，这个字符串缺少了协议部分（https:// 或 http://）。浏览器会将其视为相对路径来处理。例如：

• 当前页面位于 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)（不保留当前页在历史栈中，避免用户点击「返回」时回到空白或错误页面）。

?️ 进阶建议：增强代码的健壮性与安全性

1. 月份标准化处理（避免出现 0 月问题）

   const m = String(currentDate.getMonth() + 1).padStart(2, '0'); // → "03" 而非 3

2. 对关键参数进行 URL 编码（防止特殊字符破坏 URL 结构）

   const encodedMonth = encodeURIComponent(m);
   const encodedYear = encodeURIComponent(y);
   const myUrl = `https://www.somewhere.com/events.htm?pageComponentId=1234&month=${encodedMonth}&year=${encodedYear}`;

3. 跳转前校验 URL 格式（可选防御性检查）

   if (!myUrl.startsWith('https://') && !myUrl.startsWith('http://')) {
     console.error('Invalid redirect URL: missing protocol');
     throw new Error('Redirect URL must include http:// or https://');
   }

✅ 总结

• ❌ 错误写法："www.example.com/path" → 触发相对路径跳转，导致误定向
• ✅ 正确写法："https://www.example.com/path" → 触发绝对 URL 跳转，精准到达目标
• ✅ 推荐使用 window.location.replace(url) 替代 assign()，避免在历史记录中留下无效页面
• ✅ 对动态参数执行 encodeURIComponent() 编码，提升兼容性与安全性，防止注入风险

只要确保 URL 字符串符合标准格式（协议 + 域名 + 路径），JavaScript 变量就能安全、灵活地用于页面重定向场景，彻底规避因协议缺失引发的跳转异常。