如何使用JavaScript獲取URL參數-js教程-PHP中文網

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&amp;color=blue&amp;newuser&amp;size=m，我們可以使用window.location.search獲取查詢字符串：

const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&amp;amp;color=blue&amp;amp;newuser&amp;amp;size=m

登入後複製

然後，我們可以使用URLSearchParams解析查詢字符串的參數：

const urlParams = new URLSearchParams(queryString);

登入後複製

然後，我們可以在結果上調用任何其方法。

例如，URLSearchParams.get()將返回與給定搜索參數關聯的第一個值：

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);
// 空字符串

登入後複製

其他有用的方法

檢查參數是否存在

您可以使用URLSearchParams.has()檢查特定參數是否存在：

console.log(urlParams.has('product'));
// true

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

登入後複製

獲取參數的所有值

您可以使用URLSearchParams.getAll()返回與特定參數關聯的所有值：

console.log(urlParams.getAll('size'));
// ['m']

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

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

登入後複製

迭代參數

URLSearchParams還提供了一些常用的對象迭代器方法，允許您迭代其鍵、值和條目：

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

登入後複製

瀏覽器支持

對URLSearchParams的瀏覽器支持良好。在撰寫本文時，所有主要瀏覽器都支持它。

How to Get URL Parameters with JavaScript

如果您必須支持舊版瀏覽器（例如Internet Explorer），則可以使用polyfill。或者，您可以繼續閱讀本教程的其餘部分，並學習如何自己編寫一個。

編寫您自己的查詢字符串解析函數

讓我們繼續使用上一節中使用的URL：

const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&amp;amp;color=blue&amp;amp;newuser&amp;amp;size=m

登入後複製

這是一個函數，可以將所有URL參數作為簡潔的對象提供：

const urlParams = new URLSearchParams(queryString);

登入後複製

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

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);
// 空字符串

登入後複製

(此處省略了CodePen演示部分，因為無法直接嵌入CodePen代碼)

使用此函數之前需要了解的事項

我們的函數假設參數由&字符分隔，如W3C規範中所示。但是，URL參數格式通常沒有明確定義，因此您偶爾可能會看到;或&作為分隔符。
如果參數沒有等號或有等號但沒有值，我們的函數仍然有效。
重複參數的值將放入數組中。

如果您只需要一個可以放入代碼中的函數，那麼現在就完成了。如果您想了解函數的工作原理，請繼續閱讀。

下一節假設您了解一些JavaScript，包括函數、對象和數組。如果您需要復習，請查看MDN JavaScript參考。

函數的工作原理

總的來說，該函數獲取URL的查詢字符串（問號?之後和井號#之前的部分），並以簡潔的對象形式輸出數據。

首先，這行代碼表示，如果我們指定了一個URL，則獲取問號之後的所有內容，否則，只使用窗口的URL：

console.log(urlParams.has('product'));
// true

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

登入後複製

接下來，我們將創建一個對象來存儲我們的參數：

console.log(urlParams.getAll('size'));
// ['m']

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

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

登入後複製

如果存在查詢字符串，我們將開始解析它。首先，我們必須確保去掉從#開始的部分，因為它不是查詢字符串的一部分：

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

登入後複製

現在我們可以將查詢字符串拆分為其組成部分：

&amp;lt;code&amp;gt;http://example.com/?product=shirt&amp;amp;color=blue&amp;amp;newuser&amp;amp;size=m&amp;lt;/code&amp;gt;

登入後複製

這將給我們一個如下所示的數組：

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('&amp;amp;');

    for (var i = 0; i &amp;lt; 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] &amp;amp;&amp;amp; typeof obj[paramName] === 'string') {
          // 如果属性存在并且是字符串，则将其转换为数组
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          // 否则添加属性
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}

登入後複製

接下來，我們將遍歷此數組並將每個項目拆分為鍵和值，我們很快就會將其放入我們的對像中：

getAllUrlParams().product; // 'shirt'
getAllUrlParams().color; // 'blue'
getAllUrlParams().newuser; // true
getAllUrlParams().nonexistent; // undefined
getAllUrlParams('http://test.com/?a=abc').a; // 'abc'

登入後複製

讓我們將鍵和值分配給單個變量。如果沒有參數值，我們將將其設置為true以指示參數名稱存在。您可以根據您的用例隨意更改此設置：

var queryString = url ? url.split('?')[1] : window.location.search.slice(1);

登入後複製

可選地，您可以將所有參數名稱和值設置為小寫。這樣，您可以避免出現有人將流量發送到URL的情況，例如example=TRUE而不是example=true，而您的腳本中斷。（我見過這種情況發生。）但是，如果您的查詢字符串需要區分大小寫，您可以隨意省略這部分：

const queryString = window.location.search;
console.log(queryString);
// ?product=shirt&amp;amp;color=blue&amp;amp;newuser&amp;amp;size=m

登入後複製

接下來，我們需要處理我們可以在paramName中接收的各種類型的輸入。這可能是索引數組、非索引數組或普通字符串。

如果它是索引數組，我們希望相應的paramValue是一個數組，並將值插入到正確的位置。如果它是非索引數組，我們希望相應的paramValue是一個數組，並將元素推送到其中。如果它是字符串，我們希望在對像上創建一個常規屬性並將paramValue分配給它，除非屬性已經存在，在這種情況下，我們希望將現有的paramValue轉換為數組並將傳入的paramValue推送到該數組中。

為了說明這一點，這裡有一些示例輸入，以及我們期望的輸出：

const urlParams = new URLSearchParams(queryString);

登入後複製

這是實現此功能的代碼：

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);
// 空字符串

登入後複製

最後，我們返回包含參數和值的我們的對象。

如果您的URL有任何編碼的特殊字符，例如空格（編碼為），您還可以對其進行解碼以獲取原始值，如下所示：

console.log(urlParams.has('product'));
// true

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

登入後複製

只需注意不要解碼已經解碼的內容，否則您的腳本將出錯，尤其是在涉及百分比的情況下。

無論如何，恭喜！現在您知道如何獲取URL參數了，並且希望在此過程中學習到其他技巧。

結論

本文中的代碼適用於您獲取URL查詢參數的大多數常見用例。如果您處理任何邊緣情況，例如不常見的分隔符或特殊格式，請務必進行測試並相應地進行調整。

如果您想對URL做更多操作，可以使用特定的庫，例如query-string和Medialize URI.js。但是，由於它基本上是字符串操作，因此通常使用純JavaScript更有意義。無論您使用自己的代碼還是使用庫，請務必檢查所有內容並確保它適用於您的用例。

如果您喜歡玩字符串，請查看我們關於將字符串拆分為子字符串、將字符串轉換為數字以及將數字轉換為字符串和序數的文章。有關更深入的JavaScript知識，請閱讀我們的書籍《JavaScript：從新手到忍者，第二版》。

(此處省略了FAQs部分，因為內容與正文高度重複)

以上是如何使用JavaScript獲取URL參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！