如何在JavaScript中获取查询字符串

当您使用 javascript 时，有时您需要访问脚本中的查询字符串参数。没有直接的方法可以实现这一点，因为没有内置的 JavaScript 函数或方法可以让您实现它。当然，您可以找到许多满足您要求的第三方实用程序脚本，但最好使用 vanilla javaScript 实现它。

在这篇文章中，我们将讨论如何构建自定义函数来获取原生 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方法时，它会返回与参数关联的所有值。