JavaScript 获取 URL 参数的四种常用方法详解

作者：青柠时间：2026-10-31 17:30:00浏览：92

本文总结了在 JavaScript 中获取 URL 参数的四种常用方法。重点介绍现代浏览器推荐的 URLSearchParams 对象，以及适用于旧版浏览器的正则表达式和手动解析方案。同时涵盖通过 window.location 解析完整 URL 的技巧，并结合分页场景提供代码示例，帮助开发者根据实际需求选择最佳实现方式。

在 Web 开发中，从 URL 中提取参数是一项高频操作，通常用于控制页面展示逻辑或发起特定的 API 请求。

方法 1: 使用 URLSearchParams 对象

URLSearchParams 是现代浏览器内置的标准对象，旨在简化 URL 查询参数的解析与提取过程。

代码示例

假设当前页面 URL 为：

https://www.example.com?user=JohnDoe&age=30&city=NewYork

我们需要从中提取 user、age 和 city 这三个参数的具体值。

// 获取当前页面的 URL
const urlParams = new URLSearchParams(window.location.search);

// 获取具体的参数值
const user = urlParams.get('user');  // 获取 'user' 参数
const age = urlParams.get('age');    // 获取 'age' 参数
const city = urlParams.get('city');  // 获取 'city' 参数

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

解释

1. window.location.search：该属性返回 URL 中问号（?）及其后的查询字符串部分。例如，对于 https://www.example.com?user=JohnDoe&age=30&city=NewYork，该属性将返回 "?user=JohnDoe&age=30&city=NewYork"。

2. URLSearchParams：这是一个用于操作 URL 查询字符串的接口，通过其 get() 方法可以便捷地获取指定参数的值。

3. get() 方法：该方法用于从查询字符串中读取特定参数的值。若参数不存在，则返回 null。

方法 2: 手动解析查询字符串

若需兼容旧版浏览器或有其他特定需求，可直接使用原生 JavaScript 手动解析查询字符串。

代码示例

function getQueryParam(name) {
  const urlParams = window.location.search.substring(1);  // 获取查询字符串（去掉问号）
  const params = new URLSearchParams(urlParams);
  return params.get(name);
}

// 测试
const user = getQueryParam('user');
const age = getQueryParam('age');
const city = getQueryParam('city');

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

方法 3: 使用正则表达式解析查询字符串

当涉及复杂的参数解析逻辑时，正则表达式是一种有效手段，且该方法在较老的浏览器中也能正常运行。

代码示例

function getQueryParam(name) {
  const regex = new RegExp('[?&]' + name + '=([^&]*)', 'i');
  const result = regex.exec(window.location.search);
  return result ? decodeURIComponent(result[1]) : null;
}

// 测试
const user = getQueryParam('user');
const age = getQueryParam('age');
const city = getQueryParam('city');

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

解释

1. window.location.search：返回 URL 中的查询部分（包含 ?）。在上述示例中，其返回值为 "?user=JohnDoe&age=30&city=NewYork"。

2. RegExp：正则表达式模式 [?&]${name}=([^&]*) 用于匹配指定参数的值。

[?&] 表示参数名之前可以是问号或 & 符号。
${name} 代表需要查找的目标参数名。
([^&]*) 用于匹配参数值，即从等号后开始直到下一个 & 符号或字符串结束的内容。

3. decodeURIComponent：由于 URL 编码可能导致参数值可读性降低（如空格编码为 %20），获取参数后需使用 decodeURIComponent() 进行解码。

方法 4: 通过 window.location 解析完整的 URL

若需解析整个 URL（而不仅是查询部分），可利用 window.location 对象提供的 href、search 等属性来提取所需信息。

代码示例

function getQueryParamFromFullUrl(url, param) {
  const urlObj = new URL(url);
  return urlObj.searchParams.get(param);
}

// 示例
const fullUrl = "https://www.example.com?user=JohnDoe&age=30&city=NewYork";
const user = getQueryParamFromFullUrl(fullUrl, "user");
const age = getQueryParamFromFullUrl(fullUrl, "age");
const city = getQueryParamFromFullUrl(fullUrl, "city");

console.log(`User: ${user}`);  // 输出: User: JohnDoe
console.log(`Age: ${age}`);    // 输出: Age: 30
console.log(`City: ${city}`);  // 输出: City: NewYork

解释

new URL(url)：使用 URL 构造函数创建新的 URL 对象，可方便地访问协议、域名、路径及查询参数等各部分。

searchParams.get()：searchParams 属性提供了一种访问 URL 查询参数的标准方式。

实际项目中的应用

在实际项目中，获取 URL 参数常用于以下场景：

表单提交后的页面重定向：需在 URL 中传递状态信息，例如表单提交成功后跳转并携带用户 ID 或操作状态。

分页：请求列表数据时，常需传递 page 和 limit 等分页参数。

过滤器/搜索：用户进行筛选或搜索时，将条件传递至 URL 参数，以便重新加载相同的过滤状态。

代码示例：分页功能

// 假设我们有一个分页功能，URL 如：/products?page=2&limit=20

function getPaginationParams() {
  const urlParams = new URLSearchParams(window.location.search);
  const page = urlParams.get('page') || 1;  // 默认值为 1
  const limit = urlParams.get('limit') || 10;  // 默认值为 10
  return { page, limit };
}

const { page, limit } = getPaginationParams();
console.log(`当前页: ${page}, 每页显示: ${limit}`);

总结

获取 URL 参数的常见方法包括：

使用 URLSearchParams（推荐，适用于现代浏览器）。

使用正则表达式或手动解析（适用于老版本浏览器）。

使用 window.location 解析完整 URL。

这些方法可根据具体需求灵活选择。在现代 Web 开发中，URLSearchParams 是最简洁且易用的方式。

到此这篇关于使用JavaScript获取URL参数的方法总结的文章就介绍到这了,更多相关JavaScript获取URL参数内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

ES6模块化中js文件怎么用import和export交互

2026-11-05 17:00:48

JS读取本地文件时报错或无响应的常见原因

2026-11-05 16:32:31

let、const与var的区别：JavaScript变量声明最佳实践

2026-11-05 14:16:38

JS中直接定义静态二维数组的字面量写法

2026-11-05 14:16:08

JS 怎么查找字符串中所有匹配项的位置

2026-11-05 14:15:53