使用 URLSearchParams API 可輕松獲取 URL 查詢參數(shù)，例如：const urlParams = new URLSearchParams(window.location.search); const name = urlParams.get('name'); 2. 處理重復(fù)參數(shù)時可用 getAll() 方法獲取數(shù)組形式的值；3. 可通過 URL 對象或直接傳入查詢字符串解析自定義 URL；4. 注意參數(shù)不存在時返回 null、參數(shù)名區(qū)分大小寫、值為字符串需手動轉(zhuǎn)換類型，且 URL 編碼會自動解碼；綜上，使用 new URLSearchParams(window.location.search) 是標(biāo)準(zhǔn)且可靠的方式，能有效避免手動解析的復(fù)雜性，推薦在現(xiàn)代瀏覽器中使用此方法提取當(dāng)前 URL 的查詢參數(shù)。

To get query parameters from a URL in JavaScript, the easiest and most reliable way is to use the built-in URLSearchParams API. It’s supported in all modern browsers and makes parsing query strings simple.

1. Using URLSearchParams

If you have a URL (or just the query string), you can extract parameters like this:

// Example URL: https://example.com?name=John&age=30

const urlParams = new URLSearchParams(window.location.search);

// Get individual parameter values
const name = urlParams.get('name'); // "John"
const age = urlParams.get('age');   // "30"

console.log(name, age);

window.location.search returns the query string part of the URL (e.g., ?name=John&age=30).

Common methods of URLSearchParams:

• .get('param') – Gets the first value of a parameter.
• .getAll('param') – Gets all values (useful for repeated parameters like ?tag=js&tag=web).
• .has('param') – Checks if a parameter exists.
• .append('param', 'value') – Adds a new parameter.
• .toString() – Returns the query string.

2. Handling multiple or duplicate parameters

If a parameter appears more than once:

// For URL: ?tag=javascript&tag=html&tag=css

const tags = urlParams.getAll('tag'); // ['javascript', 'html', 'css']

3. Working with a custom URL string (not current page)

You can parse any URL or query string:

const url = 'https://example.com?product=shirt&color=blue';
const urlObj = new URL(url);
const params = new URLSearchParams(urlObj.search);

const product = params.get('product'); // 'shirt'
const color = params.get('color');     // 'blue'

Or just pass the query string directly:

const params = new URLSearchParams('?name=John&age=25');
const name = params.get('name'); // 'John'

4. Edge cases and notes

• If a parameter doesn’t exist, .get() returns null, not undefined.
• Query parameters are case-sensitive: ?Name=John ≠ name.
• Values are always returned as strings. You need to parse numbers or booleans yourself:

const age = parseInt(urlParams.get('age'), 10) || 0;
const isActive = urlParams.get('active') === 'true';

• Be cautious with URL encoding. URLSearchParams handles it automatically:

// For ?city=New York
const city = urlParams.get('city'); // "New York" (decoded automatically)

So, in short: use new URLSearchParams(window.location.search) to easily extract query parameters from the current URL. It’s clean, standard, and avoids regex or manual parsing.

以上是如何從JavaScript中的URL獲取查詢參數(shù)？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！