使用JavaScript獲取URL參數(shù)的方法總結(jié)

更新時間：2024年12月11日 10:16:15 作者：瘋狂的沙粒

在?JavaScript?中,獲取?URL?參數(shù)是非常常見的操作,這篇文章為大家整理了四個JavaScript常見的獲取URL參數(shù)方法,希望對大家有所幫助

方法 1: 使用 URLSearchParams 對象

URLSearchParams 是現(xiàn)代瀏覽器中提供的內(nèi)置對象，它提供了一種方便的方法來解析和獲取 URL 中的查詢參數(shù)。

代碼示例

假設(shè)我們有一個頁面 URL 為：

https://www.example.com?user=JohnDoe&age=30&city=NewYork

我們想要獲取 URL 中的參數(shù)值 user、age 和 city。

// 獲取當(dāng)前頁面的 URL
const urlParams = new URLSearchParams(window.location.search);

// 獲取具體的參數(shù)值
const user = urlParams.get('user');  // 獲取 'user' 參數(shù)
const age = urlParams.get('age');    // 獲取 'age' 參數(shù)
const city = urlParams.get('city');  // 獲取 'city' 參數(shù)

console.log(`User: ${user}`);  // 輸出: User: JohnDoe
console.log(`Age: ${age}`);    // 輸出: Age: 30
console.log(`City: ${city}`);  // 輸出: City: NewYork

解釋

1.window.location.search：window.location.search 會返回 URL 中的查詢部分（包括 ? 號）。比如，https://www.example.com?user=JohnDoe&age=30&city=NewYork 中，window.location.search 會返回 "?user=JohnDoe&age=30&city=NewYork"。

2.URLSearchParams：它是一個可以輕松操作 URL 查詢參數(shù)的接口。你可以使用它的 get() 方法來獲取指定參數(shù)的值。

3.get() 方法：它從查詢字符串中獲取特定的參數(shù)值。如果該參數(shù)不存在，它會返回 null。

方法 2: 手動解析查詢字符串

如果需要兼容舊版本的瀏覽器，或者出于某些其他需求，你可以通過原生 JavaScript 手動解析查詢字符串。

代碼示例

function getQueryParam(name) {
  const urlParams = window.location.search.substring(1);  // 獲取查詢字符串（去掉問號）
  const params = new URLSearchParams(urlParams);
  return params.get(name);
}

// 測試
const user = getQueryParam('user');
const age = getQueryParam('age');
const city = getQueryParam('city');

console.log(`User: ${user}`);  // 輸出: User: JohnDoe
console.log(`Age: ${age}`);    // 輸出: Age: 30
console.log(`City: ${city}`);  // 輸出: City: NewYork

方法 3: 使用正則表達(dá)式解析查詢字符串

有時，你可能希望使用正則表達(dá)式來解析 URL 查詢參數(shù)，特別是當(dāng)你需要做復(fù)雜的參數(shù)解析時。這種方法也適用于較老的瀏覽器。

代碼示例

function getQueryParam(name) {
  const regex = new RegExp('[?&]' + name + '=([^&]*)', 'i');
  const result = regex.exec(window.location.search);
  return result ? decodeURIComponent(result[1]) : null;
}

// 測試
const user = getQueryParam('user');
const age = getQueryParam('age');
const city = getQueryParam('city');

console.log(`User: ${user}`);  // 輸出: User: JohnDoe
console.log(`Age: ${age}`);    // 輸出: Age: 30
console.log(`City: ${city}`);  // 輸出: City: NewYork

解釋

1.window.location.search：它返回 URL 中的查詢部分（包括 ?）。在我們這個例子中，它返回 "?user=JohnDoe&age=30&city=NewYork"。

2.RegExp：正則表達(dá)式的模式 [?&]${name}=([^&]*) 用來匹配查詢字符串中指定參數(shù)的值。

[?&] 表示參數(shù)名之前可以是 ? 或 &。
${name} 是你需要查找的參數(shù)名。
([^&]*) 匹配參數(shù)值（直到下一個 & 符號或者字符串結(jié)束）。

3.decodeURIComponent：由于 URL 編碼可能會影響參數(shù)值的可讀性（比如空格變成 %20），所以在獲取到參數(shù)后，我們使用 decodeURIComponent() 來解碼。

方法 4: 通過 window.location 解析完整的 URL

如果需要解析的是整個 URL（不僅僅是查詢部分），你可以使用 window.location 對象提供的不同屬性（如 href, search 等）來提取信息。

代碼示例

function getQueryParamFromFullUrl(url, param) {
  const urlObj = new URL(url);
  return urlObj.searchParams.get(param);
}

// 示例
const fullUrl = "https://www.example.com?user=JohnDoe&age=30&city=NewYork";
const user = getQueryParamFromFullUrl(fullUrl, "user");
const age = getQueryParamFromFullUrl(fullUrl, "age");
const city = getQueryParamFromFullUrl(fullUrl, "city");

console.log(`User: ${user}`);  // 輸出: User: JohnDoe
console.log(`Age: ${age}`);    // 輸出: Age: 30
console.log(`City: ${city}`);  // 輸出: City: NewYork

解釋

new URL(url)：使用 URL 構(gòu)造函數(shù)，可以創(chuàng)建一個新的 URL 對象，能夠方便地訪問各個部分（協(xié)議、域名、路徑、查詢參數(shù)等）。

searchParams.get()：searchParams 屬性提供了一種訪問 URL 查詢參數(shù)的方式。

實際項目中的應(yīng)用

在實際的項目中，獲取 URL 參數(shù)常用于以下場景：

表單提交后的頁面重定向：你可能需要在 URL 中傳遞狀態(tài)信息，例如表單提交成功后跳轉(zhuǎn)并傳遞用戶 ID 或操作狀態(tài)。

分頁：比如請求列表數(shù)據(jù)時，可能需要傳遞 page 和 limit 等分頁參數(shù)。

過濾器/搜索：用戶在頁面上進(jìn)行篩選或搜索操作時，將篩選條件傳遞到 URL 參數(shù)中，以便能夠重新加載相同的過濾狀態(tài)。

代碼示例：分頁功能

// 假設(shè)我們有一個分頁功能，URL 如：/products?page=2&limit=20

function getPaginationParams() {
  const urlParams = new URLSearchParams(window.location.search);
  const page = urlParams.get('page') || 1;  // 默認(rèn)值為 1
  const limit = urlParams.get('limit') || 10;  // 默認(rèn)值為 10
  return { page, limit };
}

const { page, limit } = getPaginationParams();
console.log(`當(dāng)前頁: ${page}, 每頁顯示: ${limit}`);