在 JavaScript 中，獲取 URL 參數(shù)是非常常見的操作，尤其是在 Web 開發(fā)中，常常需要獲取查詢字符串（query string）中的參數(shù)值來控制頁面展示或進(jìn)行 API 請(qǐng)求等操作。

方法 1: 使用 URLSearchParams 對(duì)象

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

代碼示例

假設(shè)我們有一個(gè)頁面 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 會(huì)返回 URL 中的查詢部分（包括 ? 號(hào)）。比如，https://www.example.com?user=JohnDoe&age=30&city=NewYork 中，window.location.search 會(huì)返回 "?user=JohnDoe&age=30&city=NewYork"。

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

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

方法 2: 手動(dòng)解析查詢字符串

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

代碼示例

function getQueryParam(name) {
  const urlParams = window.location.search.substring(1);  // 獲取查詢字符串（去掉問號(hào)）
  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á)式解析查詢字符串

有時(shí)，你可能希望使用正則表達(dá)式來解析 URL 查詢參數(shù)，特別是當(dāng)你需要做復(fù)雜的參數(shù)解析時(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 中的查詢部分（包括 ?）。在我們這個(gè)例子中，它返回 "?user=JohnDoe&age=30&city=NewYork"。

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

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

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

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

如果需要解析的是整個(gè) URL（不僅僅是查詢部分），你可以使用 window.location 對(duì)象提供的不同屬性（如 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)建一個(gè)新的 URL 對(duì)象，能夠方便地訪問各個(gè)部分（協(xié)議、域名、路徑、查詢參數(shù)等）。

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

實(shí)際項(xiàng)目中的應(yīng)用

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

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

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

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

代碼示例：分頁功能

// 假設(shè)我們有一個(gè)分頁功能，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}`);

總結(jié)

獲取 URL 參數(shù)的常見方法有：

使用 URLSearchParams（推薦，適用于現(xiàn)代瀏覽器）。

使用正則表達(dá)式或手動(dòng)解析（適用于老版本瀏覽器）。

使用 window.location 解析完整 URL。

這些方法可以根據(jù)需求靈活選擇。在現(xiàn)代 Web 開發(fā)中，URLSearchParams 是最簡潔、易用的方式。

到此這篇關(guān)于使用JavaScript獲取URL參數(shù)的方法總結(jié)的文章就介紹到這了,更多相關(guān)JavaScript獲取URL參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論