在 Vanilla JavaScript 中获取查询字符串值

Question

window.location.search 属性 包含原始查询字符串。 如果您打开 http://localhost:5000/?answer=42， 然后 window.location.search 将等于 '?answer=42'。您可以使用解析查询字符串 URLSearchParams 类 ：

const querystring = '?answer=42';
const params = new URLSearchParams(querystring);

params.get('answer'); // '42'

实例 URLSearchParams 类似于 JavaScript Map。 为了获取搜索字符串中的所有键，您可以使用 keys() 函数 或 entries() 功能 。 请记住，这些函数返回 JavaScript 迭代器， 而不是 数组，因此您需要使用 Array.from() 转换它们。

const querystring = '?answer=42&question=unknown';
const params = new URLSearchParams(querystring);

Array.from(params.keys()); // ['answer', 'question']
Array.from(params.entries()); // [['answer', '42'], ['question', 'unknown']]

没有 URLSearchParams

URLSearchParams 类享有合理的浏览器支持并在 Node.js 中工作。 最大的警告是 URLSearchParams 不支持 Internet Explorer 。

URLSearchParams 类为您处理了很多边缘情况，但是在许多情况下，您可以使用以下简单的函数来解析查询字符串。

function parse(qs) {
  return qs.
    replace(/^\?/, '').
    split('&').
    map(str => str.split('=').map(v => decodeURIComponent(v)));
}

parse('?answer=42&question=unknown'); // [['answer', '42'], ['question', 'unknown']]