在JavaScript中获取查询字符串值的实例

在一个URL中，查询字符串值通常提供关于请求的信息，比如搜索的参数或你正在使用的对象的ID。如果任何业务或请求逻辑是在前端处理的，那么知道如何从URL中检索查询字符串值就很重要。有许多方法可以实现这一点，我们将在这里看到其中的几个。

URLSearchParams

URLSearchParams 接口被所有主要的浏览器版本所支持，除了 IE 11。它的工作原理是解析URL的查询字符串，并提供一种方法来访问这些值。比如说：

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

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

要把查询参数解析成一个对象，可以使用URL.searchParams's.entries() 方法，该方法返回一个键/值对的Iterator ，然后Object.fromEntries ，把它转换成一个对象：

let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); // {q: 'node', page: '2'}

URL对象

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

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

searchParams.get('q'); // 'node'
searchParams.get('page'); // '2'

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

上面的url 对象也是将URL的所有部分分解成不同的部分。例如：

url.href; // 'https://stackabuse.com/search?q=node&page=2'
url.origin; // 'https://stackabuse.com'
url.protocol; // 'https:'
url.host; // 'stackabuse.com'
url.hostname; // 'stackabuse.com'
url.port; // ''
url.pathname; // '/search'
url.search; // '?q=node&page=2'
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中解析查询参数，有些方法比其他方法更复杂（更强大）。这只是一种方法，是根据这个gist改编的。

然后，我们可以使用这个普通JS函数将一个查询参数解析成一个字符串：

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