如何使用JavaScript从网址中提取参数信息

在Web开发中，经常需要从URL中获取参数来处理页面逻辑。JavaScript提供了多种方法来解析URL并获取其中的参数。下面将详细介绍几种在JavaScript中从URL中提取参数的方法。

使用内置的`URLSearchParams`对象

现代浏览器中，`URLSearchParams`接口可以用来解析和处理URL的查询字符串。这是一个非常简洁和直接的方法。

// 假设当前的URL是：http://example.com?page=3&sort=desc

// 创建一个URLSearchParams实例
const searchParams = new URLSearchParams(window.location.search);

// 获取单个参数
const page = searchParams.get('page'); // 返回 "3"
const sort = searchParams.get('sort'); // 返回 "desc"

// 检查参数是否存在
const hasPageSize = searchParams.has('pagesize'); // 返回 false

// 获取所有参数的迭代器
for (const [key, value] of searchParams) {
console.log(`${key}: ${value}`);
}

手动解析查询字符串

如果你的环境不支持`URLSearchParams`，或者出于兼容性考虑，你可以手动解析查询字符串。

function getParameterByName(name) {
name = name.replace(/[\[\]]/g, '\\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return '';

return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

// 使用函数获取参数
const page = getParameterByName('page'); // 返回 "3"
const sort = getParameterByName('sort'); // 返回 "desc"

这个函数将URL的查询部分作为字符串处理，使用正则表达式查找特定的参数名称，并返回它的值。

使用`location`对象的属性

还可以直接使用`window.location`对象的属性来解析查询字符串。

// 假设当前的URL是：http://example.com?page=3&sort=desc

// 获取整个查询字符串
const queryString = window.location.search;

// 手动解析
const params = new URLSearchParams(queryString);
const page = params.get('page'); // 返回 "3"
const sort = params.get('sort'); // 返回 "desc"

这种方法不如`URLSearchParams`方便，但是它可以在不支持`URLSearchParams`的老版本浏览器中使用。