在这篇快速文章中，我们将讨论几种不同的方法，你可以用它们来获取JavaScript中的查询字符串。
当你用JavaScript工作时，有时你需要在你的脚本中访问查询字符串参数。没有直接的方法来实现这一点，因为没有内置的JavaScript函数或方法允许你实现它。当然，你可以找到很多第三方的实用脚本来满足你的要求，但如果你能用虚构的JavaScript来实现它，那就最好不过了。
在这篇文章中，我们将讨论如何在vanilla JavaScript中建立一个自定义函数来获取查询字符串参数。稍后，我们还将探讨URLSearchParams 接口，以了解它是如何工作的，以及它对查询字符串参数有什么帮助。
如何在vanilla JavaScript中获取查询字符串
在本节中，我们将看到如何用vanilla JavaScript获得查询字符串值。
让我们来看看下面这个JavaScript例子。
function getQueryStringValues(key) {
var arrParamValues = [];
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < url.length; i++) {
var arrParamInfo = url[i].split('=');
if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
arrParamValues.push(decodeURIComponent(urlparam[1]));
}
}
return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
}
// index.php?keyword=FooBar&hobbies[]=sports&hobbies[]=Reading
console.log(getQueryStringValues('keyword')); // "FooBar"
console.log(getQueryStringValues('hobbies')); // Array [ "sports", "Reading" ]
console.log(getQueryStringValues('keyNotExits')); // null
我们做了getQueryStringValues 函数，你可以用它来获取URL中可用的查询字符串参数的值。
让我们通过这个函数来看看它是如何工作的。
下面的片段是该函数中最重要的片段之一。
var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
首先，我们使用了indexOf 方法来查找URL中? 字符的位置。接下来，我们使用slice 方法来提取URL中的查询字符串部分。最后，我们使用split 方法，通过& 字符来分割查询字符串。因此，url 变量被初始化为一个查询字符串参数的数组。
接下来，我们循环浏览url 数组中的所有元素。在循环过程中，我们使用split 方法，通过= 字符来分割数组的值。这样一来，arrParamInfo 变量就被初始化为一个数组，其中数组的键是参数名称，数组的值是参数值。你可以在下面的片段中看到这一点。
var arrParamInfo = url[i].split('=');
接下来，我们将其与函数中传递的参数进行比较。如果它与传入的参数相匹配，我们将把参数值推入arrParamValues 数组。正如你所看到的，我们也已经涵盖了单参数和数组参数。
if (arrParamInfo[0] == key || arrParamInfo[0] == key+'[]') {
arrParamValues.push(decodeURIComponent(urlparam[1]));
}
最后，如果arrParamValues 变量包含值，我们将返回它，否则就返回null 。
return (arrParamValues.length > 0 ? (arrParamValues.length == 1 ? arrParamValues[0] : arrParamValues) : null);
你可以继续用不同的值来测试getQueryStringValues 函数。
如上面的例子所示，我们已经用不同的值调用了它，并用console.log 函数记录了输出。值得注意的是，如果你在getQueryStringValues 函数中传递的参数在查询字符串中以数组形式存在，你将得到一个数组的响应，它将返回该参数的所有值。
URLSearchParams 的方式
这是一种最简单的方法，你可以用它来获取JavaScript中的查询字符串值。URLSearchParams 接口提供了实用的方法来处理一个URL的查询字符串。你可以用Can I use来检查浏览器的支持。
让我们快速看看它是如何工作的。
// index.php?keyword=Search Text&click=Submit
var urlParams = new URLSearchParams(window.location.search);
一旦你用查询字符串初始化了URLSearchParams 对象，你就可以使用URLSearchParams 对象所提供的实用方法。
让我们在本文的上下文中浏览一下几个有用的方法。
get 方法
顾名思义，get 方法是用来获取查询字符串参数的值。
让我们通过下面的例子来理解它。
// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.get('keyword')); // “Search Text”
在上面的例子中，我们已经获取了keyword 查询字符串参数的值，它将输出Search Text。
这样，你可以使用get 方法来获取任何查询字符串参数的值。
has 方法
has 方法是用来检查查询字符串中是否存在参数。
// index.php?keyword=Search Text&click=Submit
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.has('order')); // “false”
console.log(objUrlParams.has('click')); // “true”
在上面的例子中，我们使用了has 方法来检查不同参数的存在。
getAll 方法
如果一个参数多次存在，getAll 方法用于获取该参数的所有值。
让我们通过下面的例子来检查一下。
// index.php?keyword=Search Text&click=Submit&filter=value1&filter=value2
var objUrlParams = new URLSearchParams(window.location.search);
console.log(objUrlParams.getAll('filter')); // [“value1”,”valu2”]
正如你所看到的，当我们使用getAll 方法时，它会返回所有与该参数相关的值。
总结
今天，我们讨论了在JavaScript中获取查询字符串的不同方法。除了普通的 JavaScript，我们还讨论了如何使用URLSearchParams接口来获取查询字符串的变量。
