在这篇简短的文章中，我们将讨论在 javascript 中获取查询字符串的几种不同方法。
当您使用 javascript 时，有时您需要访问脚本中的查询字符串参数。没有直接的方法可以实现这一点，因为没有内置的 javascript 函数或方法可以让您实现它。当然，您可以找到很多满足您要求的第三方实用程序脚本，但最好可以使用普通 javascript 来实现它。
在这篇文章中，我们将讨论如何构建自定义函数以在普通 javascript 中获取查询字符串参数。稍后，我们还将探索 urlsearchparams 接口，以了解它的工作原理以及它如何帮助处理查询字符串参数。
如何在 vanilla javascript 中获取查询字符串在本节中，我们将了解如何使用普通 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[]=readingconsole.log(getquerystringvalues('keyword')); // foobarconsole.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 的查询字符串。您可以通过“我可以使用吗”来检查浏览器支持情况。
让我们快速看看它是如何工作的。
// index.php?keyword=search text&click=submitvar urlparams = new urlsearchparams(window.location.search);
使用查询字符串初始化 urlsearchparams 对象后，您就可以使用 urlsearchparams 对象提供的实用方法了。
让我们在本文中介绍一些有用的方法。
get 方法顾名思义，get方法用于获取查询字符串参数的值。
让我们尝试通过以下示例来理解它。
// index.php?keyword=search text&click=submitvar objurlparams = new urlsearchparams(window.location.search);console.log(objurlparams.get('keyword')); // “search text”
在上面的示例中，我们获取了 keyword 查询字符串参数的值，它将输出搜索文本。
这样就可以使用get方法获取任意查询字符串参数的值。
has 方法has方法用于检查查询字符串中是否存在参数。
// index.php?keyword=search text&click=submitvar 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=value2var objurlparams = new urlsearchparams(window.location.search);console.log(objurlparams.getall('filter')); // [“value1”,”valu2”]
如您所见，当我们使用 getall 方法时，它返回与该参数关联的所有值。
结论今天，我们讨论了可用于在 javascript 中获取查询字符串的不同方法。除了普通 javascript 之外，我们还讨论了如何使用 urlsearchparams 接口获取查询字符串变量。
以上就是获取javascript中的查询字符串的方法的详细内容。