原生JavaScript获取URL参数

发表于 分类于 阅读次数： Valine：

原文：Get Query String Values in Vanilla JavaScript

本文展示了如何用原生JavaScript解析URL参数。

window.location.search属性包含原始的URL参数，例如，打开http://localhost:5000/?answer=42时，window.location.search等于'?answer=42'。

可以用URLSearchParams类对URL参数进行解析：

1
2
3
4
const querystring = '?answer=42';
const params = new URLSearchParams(querystring);

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

URLSearchParams的实例类似于Map数据类型，用keys()函数或entries()函数可以获取其中所有的key。注意：这两个函数返回的是遍历器而非数组，需要用Array.from()转换为数组。

1
2
3
4
5
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在浏览器中支持良好，而且Node.js中也可用。但问题在于IE并不支持URLSearchParams。

URLSearchParams帮我们处理了许多边缘案例，但在大多场景下，可以用以下简单的函数解析URL参数。

1
2
3
4
5
6
7
8
function parse(qs) {
  return qs.
    replace(/^\?/, '').
    split('&').
    map(str => str.split('=').map(v => decodeURIComponent(v)));
}

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

本教程对您有帮助吗？来GitHub仓库点个星支持我们吧！