如何在 JavaScript 中获取 Query 字符串值

在网页开发过程中，经常需要从 URL 中获取查询字符串的参数。以下是几种无需插件就能实现这一需求的方法。

使用 URLSearchParams

基本用法

URLSearchParams 是一种方便的方法来解析查询字符串，并在现代浏览器中得到了广泛的支持。

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

这个示例代码从当前页面的 URL 中提取名为 myParam 的参数值。

获取所有参数

如果需要获取所有查询参数，可以使用 Object.fromEntries 将查询参数转换为一个对象。

const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());

使用 Proxy 代理对象

通过 Proxy 封装后可以更直接地访问查询参数，但它不支持遍历。

const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
let value = params.some_key; // 访问 "some_key" 参数的值

使用正则表达式

在没有 URLSearchParams 支持的环境中，可以使用正则表达式手动解析查询字符串。

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

// 使用示例
var foo = getParameterByName('foo'); // 获取 "foo" 参数的值

注意事项

参数重复：如果查询字符串中同一个参数名出现多次，如 ?foo=lorem&foo=ipsum，上述方法只会获取第一个值 lorem。
区分大小写：默认情况下，参数名是区分大小写的。如果需要忽略大小写，可以在正则表达式中添加 i 修饰符。
浏览器支持：URLSearchParams 在大多数现代浏览器中都支持，但在某些旧版本浏览器中可能不兼容。

通过以上几种方法，可以根据不同的需求和环境选择最合适的方式来获取 URL 查询字符串中的参数。