如何使用JavaScript获取URL参数

URL参数（也称为查询字符串参数或URL变量）用于在页面之间或通过URL在客户端和服务器之间发送少量数据。它们可以包含各种有用的信息，例如搜索查询、链接推荐、产品信息、用户偏好等等。

本文将向您展示如何使用JavaScript解析和操作URL参数。

关键要点

• URL参数，或查询字符串参数，用于通过URL在页面之间或在客户端和服务器之间发送少量数据，并且可以包含有用的信息，例如搜索查询、链接推荐、产品信息、用户偏好等等。
• 现代浏览器中的URLSearchParams接口允许轻松解析和操作URL参数，其方法包括：get() 用于返回与给定搜索参数关联的第一个值；has() 用于检查特定参数是否存在；getAll() 用于返回与特定参数关联的所有值。
• 对于旧版浏览器，可以使用polyfill，或者开发人员可以创建自己的查询字符串解析函数，该函数接收URL的查询字符串并将数据以对象格式返回。
• 重要的是要注意，URL参数格式没有明确定义，可能会有所不同，开发人员应根据具体用例测试和调整代码。如果需要更复杂地操作URL，可以使用特定的库，例如query-string和Medialize URI.js。

获取URL参数

在现代浏览器中，这变得容易多了，这要归功于URLSearchParams接口。它定义了一系列实用程序方法来处理URL的查询字符串。

假设我们的URL是https://example.com/?product=shirt&color=blue&newuser&size=m，我们可以使用window.location.search获取查询字符串：

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

然后，我们可以使用URLSearchParams解析查询字符串的参数：

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

然后，我们可以在结果上调用任何其方法。

例如，URLSearchParams.get()将返回与给定搜索参数关联的第一个值：

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

其他有用的方法

检查参数是否存在

您可以使用URLSearchParams.has()检查特定参数是否存在：

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

获取参数的所有值

您可以使用URLSearchParams.getAll()返回与特定参数关联的所有值：

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

迭代参数

URLSearchParams还提供了一些常用的对象迭代器方法，允许您迭代其键、值和条目：

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

浏览器支持

对URLSearchParams的浏览器支持良好。在撰写本文时，所有主要浏览器都支持它。

如果您必须支持旧版浏览器（例如Internet Explorer），则可以使用polyfill。或者，您可以继续阅读本教程的其余部分，并学习如何自己编写一个。

编写您自己的查询字符串解析函数

让我们继续使用上一节中使用的URL：

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

这是一个函数，可以将所有URL参数作为简洁的对象提供：

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

您很快就会看到它的工作原理，但首先，这里有一些用法示例：

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

(此处省略了CodePen演示部分，因为无法直接嵌入CodePen代码)

使用此函数之前需要了解的事项

• 我们的函数假设参数由&字符分隔，如W3C规范中所示。但是，URL参数格式通常没有明确定义，因此您偶尔可能会看到;或&作为分隔符。
• 如果参数没有等号或有等号但没有值，我们的函数仍然有效。
• 重复参数的值将放入数组中。

如果您只需要一个可以放入代码中的函数，那么现在就完成了。如果您想了解函数的工作原理，请继续阅读。

下一节假设您了解一些JavaScript，包括函数、对象和数组。如果您需要复习，请查看MDN JavaScript参考。

函数的工作原理

总的来说，该函数获取URL的查询字符串（问号?之后和井号#之前的部分），并以简洁的对象形式输出数据。

首先，这行代码表示，如果我们指定了一个URL，则获取问号之后的所有内容，否则，只使用窗口的URL：

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

接下来，我们将创建一个对象来存储我们的参数：

<code class="language-javascript">console.log(urlParams.getAll('size'));
// ['m']

// 以编程方式添加第二个size参数。
urlParams.append('size', 'xl');

console.log(urlParams.getAll('size'));
// ['m', 'xl']</code>

如果存在查询字符串，我们将开始解析它。首先，我们必须确保去掉从#开始的部分，因为它不是查询字符串的一部分：

<code class="language-javascript">const keys = urlParams.keys(),
      values = urlParams.values(),
      entries = urlParams.entries();

for (const key of keys) console.log(key);
// product, color, newuser, size

for (const value of values) console.log(value);
// shirt, blue, , m

for (const entry of entries) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
// product: shirt
// color: blue
// newuser:
// size: m</code>

现在我们可以将查询字符串拆分为其组成部分：

<code>http://example.com/?product=shirt&color=blue&newuser&size=m</code>

这将给我们一个如下所示的数组：

<code class="language-javascript">function getAllUrlParams(url) {
  // 从url（可选）或窗口获取查询字符串
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

  // 我们将在这里存储参数
  var obj = {};

  // 如果存在查询字符串
  if (queryString) {
    // #后面的内容不是查询字符串的一部分，所以去掉它
    queryString = queryString.split('#')[0];

    // 将查询字符串拆分为其组成部分
    var arr = queryString.split('&');

    for (var i = 0; i < arr.length; i++) {
      // 分离键和值
      var a = arr[i].split('=');

      // 设置参数名称和值（如果为空则使用'true'）
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

      // （可选）保持大小写一致
      paramName = paramName.toLowerCase();
      if (typeof paramValue === 'string') paramValue = paramValue.toLowerCase();

      // 如果paramName以方括号结尾，例如colors[]或colors[2]
      if (paramName.match(/\[(\d+)?\]$/)) {
        // 如果不存在，则创建键
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        // 如果它是索引数组，例如colors[2]
        if (paramName.match(/\[\d+\]$/)) {
          // 获取索引值并在适当的位置添加条目
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          // 否则将值添加到数组的末尾
          obj[key].push(paramValue);
        }
      } else {
        // 我们正在处理字符串
        if (!obj[paramName]) {
          // 如果不存在，则创建属性
          obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string') {
          // 如果属性存在并且是字符串，则将其转换为数组
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // 否则添加属性
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}</code>

接下来，我们将遍历此数组并将每个项目拆分为键和值，我们很快就会将其放入我们的对象中：

<code class="language-javascript">getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'</code>

让我们将键和值分配给单个变量。如果没有参数值，我们将将其设置为true以指示参数名称存在。您可以根据您的用例随意更改此设置：

<code class="language-javascript">var queryString = url ? url.split('?')[1] : window.location.search.slice(1);</code>

可选地，您可以将所有参数名称和值设置为小写。这样，您可以避免出现有人将流量发送到URL的情况，例如example=TRUE而不是example=true，而您的脚本中断。（我见过这种情况发生。）但是，如果您的查询字符串需要区分大小写，您可以随意省略这部分：

<code class="language-javascript">const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&color=blue&newuser&size=m</code>

接下来，我们需要处理我们可以在paramName中接收的各种类型的输入。这可能是索引数组、非索引数组或普通字符串。

如果它是索引数组，我们希望相应的paramValue是一个数组，并将值插入到正确的位置。如果它是非索引数组，我们希望相应的paramValue是一个数组，并将元素推送到其中。如果它是字符串，我们希望在对象上创建一个常规属性并将paramValue分配给它，除非属性已经存在，在这种情况下，我们希望将现有的paramValue转换为数组并将传入的paramValue推送到该数组中。

为了说明这一点，这里有一些示例输入，以及我们期望的输出：

<code class="language-javascript">const urlParams = new URLSearchParams(queryString);</code>

这是实现此功能的代码：

<code class="language-javascript">const product = urlParams.get('product');
console.log(product);
// shirt

const color = urlParams.get('color');
console.log(color);
// blue

const newUser = urlParams.get('newuser');
console.log(newUser);
// 空字符串</code>

最后，我们返回包含参数和值的我们的对象。

如果您的URL有任何编码的特殊字符，例如空格（编码为 ），您还可以对其进行解码以获取原始值，如下所示：

<code class="language-javascript">console.log(urlParams.has('product'));
// true

console.log(urlParams.has('paymentmethod'));
// false</code>

只需注意不要解码已经解码的内容，否则您的脚本将出错，尤其是在涉及百分比的情况下。

无论如何，恭喜！现在您知道如何获取URL参数了，并且希望在此过程中学习到其他技巧。

结论

本文中的代码适用于您获取URL查询参数的大多数常见用例。如果您处理任何边缘情况，例如不常见的分隔符或特殊格式，请务必进行测试并相应地进行调整。

如果您想对URL做更多操作，可以使用特定的库，例如query-string和Medialize URI.js。但是，由于它基本上是字符串操作，因此通常使用纯JavaScript更有意义。无论您使用自己的代码还是使用库，请务必检查所有内容并确保它适用于您的用例。

如果您喜欢玩字符串，请查看我们关于将字符串拆分为子字符串、将字符串转换为数字以及将数字转换为字符串和序数的文章。有关更深入的JavaScript知识，请阅读我们的书籍《JavaScript：从新手到忍者，第二版》。

(此处省略了FAQs部分，因为内容与正文高度重复)

以上是如何使用JavaScript获取URL参数的详细内容。更多信息请关注PHP中文网其他相关文章！