JavaScript 獲取 URL 引數

Harshit Jindal 2023年10月12日 JavaScript
  1. 使用 URL 物件的 searchParams 從 GET 引數中獲取值
  2. 使用 location.search 從 GET 引數中獲取值
JavaScript 獲取 URL 引數

本教程介紹如何從 GET 引數中獲取值。

使用 URL 物件的 searchParams 從 GET 引數中獲取值

URL 物件表示由引數定義的 URL。我們可以使用它的 searchParams 屬性返回一個 URLSearchParams 物件，該物件允許我們訪問在 GET 中解碼的引數。然後我們可以使用附加到 URLSearchParams 物件的 get 函式來獲取 URL 中任何引數的值。

var input_string =
    'http://www.google.com/app.html?apple=1&banana=3&cherry=m2';  // window.location.href
var url = new URL(input_string);
var cherry = url.searchParams.get('cherry');
console.log(cherry);

在上面的程式碼中，我們首先獲取 URLSearchParams 物件，然後使用其 get 函式獲取解碼後的引數值。

使用 location.search 從 GET 引數中獲取值

location 的 search 屬性基本上是一個搜尋字串，也稱為 query string。為了獲取引數的值，我們拆分字串，然後將引數及其值儲存在字典中。然後我們可以輕鬆地使用字典來獲取所有的鍵值對。

var GET_parameters = {};

if (location.search) {
  var splitts = location.search.substring(1).split('&');
  for (var i = 0; i < splitts.length; i++) {
    var key_value_pair = splitts[i].split('=');
    if (!key_value_pair[0]) continue;
    GET_parameters[key_value_pair[0]] = key_value_pair[1] || true;
  }
}

var abc = GET_parameters.abc;

所有主要瀏覽器都支援討論的所有方法。

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe
作者： Harshit Jindal
Harshit Jindal avatar Harshit Jindal avatar

Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.

LinkedIn