JavaScript 獲取 URL 引數

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

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

使用 URL 物件的 searchParamsGET 引數中獲取值

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.searchGET 引數中獲取值

locationsearch 屬性基本上是一個搜尋字串,也稱為 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;

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

作者: 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