📅  最后修改于: 2023-12-03 15:38:33.627000             🧑  作者: Mango
在 web 开发中,查询参数是我们经常需要获取的。JavaScript 中有几种方式可以获取当前 url 中的查询参数,本文将为你介绍三种不同的获取方式。
URLSearchParams 是一个构造函数,可以用来解析和操作 url 的查询参数部分。它可以通过传入一个 url 或者直接传入查询参数字符串来生成一个 URLSearchParams 对象。以下是一个获取 url 查询参数的示例代码:
const params = new URLSearchParams(window.location.search);
const foo = params.get('foo');
console.log(foo);
其中,window.location.search
会返回当前 url 的查询参数部分,生成一个 URLSearchParams 对象之后,我们可以使用 get
方法获取指定参数名的参数值。
正则表达式也是获取 url 查询参数的一种常见方式,以下是一个使用正则表达式获取 url 查询参数的示例代码:
const url = window.location.search;
const reg = /(?:[?&])([^=]+)(?:=)([^&]+)/g;
let match = null;
const queryParams = {};
while ((match = reg.exec(url))) {
queryParams[match[1]] = match[2];
}
console.log(queryParams);
通过正则表达式匹配 url 查询参数,将匹配到的参数名和参数值保存到一个对象中。需要注意的是,由于查询参数之间是通过 &
字符进行分隔的,因此上面的正则表达式中会匹配 &
字符,并且通过 (?: .. )
这种非捕获分组的方式忽略掉它们。
我们也可以直接使用 window.location.search
来获取当前 url 中的查询参数,以下是一个使用该方式的示例代码:
const url = window.location.search;
const searchParams = url.substr(1).split('&').reduce((params, str) => {
const [key, val] = str.split('=');
params[key] = val ? decodeURIComponent(val.replace(/\+/g, ' ')) : '';
return params;
}, {});
console.log(searchParams);
这个示例中,我们首先使用 substr
方法去掉查询参数开头的 ?
,然后使用 split
方法将整个查询参数字符串按 &
字符进行分割,并将处理后的参数以键值对的形式保存到一个对象中。
那么如何处理参数值中包含的特殊字符呢?这里使用了 decodeURIComponent
函数将参数值字符串中的 %20
字符替换成空格。
这篇文章为你介绍了三种不同的获取 url 查询参数的方式。使用 URLSearchParams 可以更简洁地获取查询参数,使用正则表达式则可以更灵活地匹配查询参数格式,而直接使用 window.location.search 可以减少代码量。在实际开发中,可以根据具体情况选择最适合的方式。