在 JavaScript 中获取查询字符串值

在 URL 中，查询字符串值通常提供有关请求的信息，例如搜索参数或您正在使用的对象的 ID。 如果在前端处理任何业务或请求逻辑，了解如何从 URL 中检索查询字符串值非常重要。 有很多方法可以实现这一点，我们将在这里看到其中的一些。

网址搜索参数

URLSearchParams 除了 IE 11 之外，所有主要浏览器版本都支持接口。它通过解析 URL 的查询字符串并提供访问值的方法来工作。 例如：

let params = new URLSearchParams('q=node&page=2');
params.get('q'); 
params.get('page'); 

此接口的缺点之一是您必须仅将 URL 的查询字符串传递给它。 如果您正在使用当前的浏览器 URL，这很容易做到，因为您可以通过 window.location.search. 如果您使用任何其他 URL，则需要单独解析并传递查询字符串。

要将查询参数解析为对象，请使用 URL.searchParams的 .entries() 方法，它返回一个 Iterator 键/值对，和 Object.fromEntries 将其转换为对象。

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); 

网址对象

URL 除了 IE 11 之外的所有主要浏览器版本也都支持 API。它提供了一种更灵活的 URL 解析方式，还提供了一种访问查询字符串值的方式。 例如：

const url = new URL('https://stackabuse.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); 
searchParams.get('page'); 

url.searchParams 是由返回的相同类型的实例对象 URLSearchParams.

url 上面的对象也将 URL 的所有部分分解成各个部分。 例如：

url.href; 
url.origin; 
url.protocol; 
url.host; 
url.hostname; 
url.port; 
url.pathname; 
url.search; 
url.hash; 

纯JavaScript

如果由于某种原因您无法访问上述 API 或想要对解析进行更多控制，您可以使用以下代码将查询字符串解析为对象。

function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

备注: 有很多方法可以在纯 JS 中解析查询参数，其中一些比其他的更复杂（和健壮）。 这只是一种方式，改编自 这个要点.

然后我们可以使用这个简单的 JS 函数将单个查询参数解析为字符串：

getQueryParams('https://stackabuse.com/search?q=node&page=2')