使用JavaScript获取当前网页URL及参数

在前端日常开发中，获取当前网页的完整地址或从 URL 查询字符串（Query String）中提取特定参数，是一项极其高频的基础需求。JavaScript 原生提供了 window.location 对象来完整呈现当前页面的地址信息，而针对参数解析，现代浏览器原生支持的 URLSearchParams 构造函数则是最优雅、直观的标准解法。本文将从获取完整 URL 开始，系统拆解 URL 各组成部分，并全面讲解不同场景下提取与处理查询参数的具体方式。

一、获取当前网页完整 URL 及各部分信息

浏览器在全局执行上下文中挂载了 window.location 对象（通常可简写为 location）。这个对象不仅包含了当前加载文档的完整 URL 字符串，还将协议、主机名、端口号、路径、查询参数和哈希锚点解构成独立属性，供开发者按需直接读取。

最常用的获取代码如下：

// 1. 获取完整 URL
const currentUrl = window.location.href;
console.log("完整URL:", currentUrl);

// 2. 获取查询字符串（包含开头的 ?）
const queryString = window.location.search;
console.log("查询参数串:", queryString); // 例如 "?id=1024&type=share"

// 3. 其它常用属性
console.log("主机名:", window.location.hostname); // "www.example.com"
console.log("路径部分:", window.location.pathname); // "/blog/view.html"
console.log("协议类型:", window.location.protocol); // "https:"

二、使用 URLSearchParams 解析获取具体参数（推荐标准做法）

单纯获取 location.search 得到的只是一个由问号开头的原始字符串。要精准拿到某个键名对应的值，现代 JavaScript 提供了原生的 URLSearchParams 构造函数。它免去了手动编写正则表达式或用 split('&') 切割字符串的繁琐过程，并且内部自动处理了 URL 字符解码。

2.1 基础提取示例

假设当前网页地址为 https://example.com/index.html?userId=9527&source=app&status=active，提取参数的代码非常简明：

// 步骤 1：传入 location.search 初始化 URLSearchParams 实例
const searchParams = new URLSearchParams(window.location.search);

// 步骤 2：使用 get() 获取指定字段
const userId = searchParams.get('userId'); // 返回字符串 "9527"
const source = searchParams.get('source'); // 返回 "app"

// 步骤 3：获取一个不存在的字段
const nonExistent = searchParams.get('token'); // 返回 null

// 步骤 4：判断某个参数是否存在
if (searchParams.has('userId')) {
  console.log("用户ID有效:", userId);
}

2.2 一次性将所有参数转换为普通 JavaScript 对象

如果页面参数较多，需要以对象形式传递给后端接口或组件状态，可以借助 Object.fromEntries() 配合 searchParams.entries() 完成单行转换：

const params = new URLSearchParams(window.location.search);
// 将参数迭代器转换为键值对对象
const queryObj = Object.fromEntries(params.entries());

console.log(queryObj);
// 输出示例: { userId: "9527", source: "app", status: "active" }

三、复杂与边缘场景下的参数提取策略

在实际业务中，URL 参数并不总是整齐划一的简单键值。经常会遇到重名参数（如多选标签）、中文或特殊字符编码、以及前端单页面应用（SPA）常见的哈希路由等情况。针对不同场景，需要选择相匹配的处理方式。

3.1 获取同名多值参数（getAll）

在表单多选或筛选场景中，同一个键名可能会出现多次，例如：?category=book&category=electronic&category=clothing。若使用 get('category')，只能拿到排在首位的 "book"。此时应改用 getAll()：

const searchParams = new URLSearchParams(window.location.search);
// 获取同名的全部参数集合
const categories = searchParams.getAll('category');

console.log(categories); // ["book", "electronic", "clothing"]

3.2 解析单页应用（SPA）Hash 路由中的参数

很多采用 Vue Router 或 Hash 模式路由的前端应用，URL 结构类似于：https://example.com/app/#/dashboard?orderId=9876&tab=info。按照浏览器的标准定义，# 号及之后的所有内容都会被归入 location.hash，导致此时的 location.search 变为空字符串 ""。

如果直接对 location.search 执行解析将无法获取任何参数。针对这种场景，编写一段稳妥的提取逻辑：

function getHashQueryParams() {
  const hash = window.location.hash; // 例如 "#/dashboard?orderId=9876&tab=info"
  const questionMarkIndex = hash.indexOf('?');
  
  if (questionMarkIndex === -1) {
    return new URLSearchParams(); // 无参数时返回空实例
  }
  
  // 提取问号及其后面的字符串
  const hashQuery = hash.slice(questionMarkIndex);
  return new URLSearchParams(hashQuery);
}

// 调用示例
const hashParams = getHashQueryParams();
console.log("订单号:", hashParams.get('orderId')); // "9876"
console.log("选项卡:", hashParams.get('tab'));     // "info"

3.3 解析任意外部 URL 字符串中的参数

如果需要解析的目标不是当前页面的地址，而是来自接口返回的链接、或者某个 <a> 标签的 href 属性，可以直接实例化 new URL() 对象：

const targetLink = "https://other-domain.org/api/callback?code=abc1234&state=xyz";

// 创建标准 URL 实例
const parsedUrl = new URL(targetLink);

// 直接访问 parsedUrl 上的 searchParams 属性
console.log("主机名:", parsedUrl.hostname);       // "other-domain.org"
console.log("授权码:", parsedUrl.searchParams.get('code')); // "abc1234"

四、兼容旧环境的备用方案（正则表达式方式）

在绝大多数现代浏览器（包括 Chrome、Edge、Firefox、Safari、iOS Safari 及 Android Webview）中，URLSearchParams 与 URL 均已获得原生支持。如果项目需要维护极特殊的古老运行环境，可以通过正则表达式配合 decodeURIComponent 实现一个轻量函数作为兜底：

// 基于正则表达式解析指定参数值的备用工具函数
function getQueryString(name) {
  // 构造匹配参数名的正则模式，支持以 ?、& 开头，以 & 或结尾结束
  const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  // 去除开头的问号后进行匹配
  const match = window.location.search.substring(1).match(reg);
  
  if (match !== null) {
    // 对获取到的值执行 URI 解码
    return decodeURIComponent(match[2]);
  }
  return null;
}

// 使用示例
const userId = getQueryString('userId');
console.log("正则获取到的参数:", userId);

五、总结与高频速查

为了便于在日常编码与代码审查中快速查阅，以下总结了 JavaScript 获取 URL 及参数的核心 API 与适用场景对照：

目标需求	推荐代码写法	返回值类型与特性
获取当前网页完整地址	window.location.href	string，绝对路径
获取特定参数单值	new URLSearchParams(location.search).get('key')	string 或 null
获取重名多值参数	new URLSearchParams(location.search).getAll('key')	Array<string>
判断参数是否存在	new URLSearchParams(location.search).has('key')	boolean
所有参数转换为对象	Object.fromEntries(new URLSearchParams(location.search))	普通 Object
解析非当前页面的外部链接	new URL(targetUrlString).searchParams.get('key')	原生自带标准化解析

掌握 window.location 与 URLSearchParams 这两组原生浏览器 API，能够满足绝大多数业务场景下对页面地址与参数的提取与操作需求。代码简洁易读，兼具稳健的兼容性与解码表现。