在前端開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要獲取URL中的參數(shù)的情況。比如我們需要根據(jù)不同的參數(shù)展示不同的內(nèi)容，或者需要將參數(shù)發(fā)送給后端進(jìn)行數(shù)據(jù)的處理。那么如何使用JavaScript來(lái)獲取URL中的參數(shù)呢？本文將為大家詳細(xì)介紹。
第一種方法：使用location.search
其中，location是一個(gè)全局對(duì)象，表示當(dāng)前頁(yè)面的URL信息，search是其中一個(gè)屬性，表示URL中的查詢部分（即？后面的部分）。我們可以將search屬性值作為字符串進(jìn)行處理。下面是一個(gè)簡(jiǎn)單的例子，假設(shè)當(dāng)前URL為https://www.example.com/?name=zhangsan&age=18，我們需要獲取其中的name和age參數(shù)。

html
<pre>
<code>
const params = new URLSearchParams(location.search);
const name = params.get('name');
const age = params.get('age');
console.log(name); // zhangsan
console.log(age); // 18
</code>

通過(guò)URLSearchParams將search屬性值轉(zhuǎn)換成可操作的對(duì)象，然后調(diào)用其get方法即可獲取指定參數(shù)的值。需要注意的是，如果URL中不存在指定的參數(shù)，get方法返回null。
第二種方法：使用正則表達(dá)式
假設(shè)當(dāng)前URL為https://www.example.com/?name=zhangsan&age=18，我們需要獲取其中的name和age參數(shù)。
html

<code>
const search = location.search.substr(1);
const reg = /(?:^|&)([^&=]*)=?([^&]*)/g;
const params = {};
let match;
while (match = reg.exec(search)) {
const key = decodeURIComponent(match[1]);
const value = decodeURIComponent(match[2]);
params[key] = value;
}
console.log(params.name); // zhangsan
console.log(params.age); // 18
</code>

這里使用了正則表達(dá)式來(lái)解析URL中的查詢部分。首先將search屬性值去掉問(wèn)號(hào)（substr方法可將字符串的第一個(gè)字符截取掉），然后使用正則表達(dá)式匹配其中的鍵值對(duì)。由于URL中的參數(shù)可以以多個(gè)問(wèn)號(hào)形式出現(xiàn)，我們需要使用while循環(huán)來(lái)匹配所有符合條件的鍵值對(duì)，最終將其以key-value的形式存入params對(duì)象中。
需要注意的是，由于URL中的參數(shù)值可能會(huì)被編碼，因此我們需要使用decodeURIComponent方法將其解碼。
第三種方法：使用URLSearchParams
如果你的代碼運(yùn)行在較新版本的瀏覽器中，那么使用URLSearchParams對(duì)象將是一個(gè)更加方便的選擇。除了可以獲取URL中的參數(shù)外，URLSearchParams對(duì)象還可以進(jìn)行參數(shù)的添加、刪除、修改等操作。
`html

<code>
const searchParams = new URLSearchParams(location.search);
console.log(searchParams.get('name')); // zhangsan
console.log(searchParams.get('age')); // 18
searchParams.append('gender', 'male');
console.log(searchParams.toString()); // name=zhangsan&age=18&gender=male
</code>

使用URLSearchParams對(duì)象只需要將search屬性值作為參數(shù)傳入構(gòu)造函數(shù)即可。之后就可以使用它提供的各種方法對(duì)參數(shù)進(jìn)行操作。
總結(jié)
以上三種方法都可以用來(lái)獲取URL中的參數(shù)，具體選擇哪種方法可以根據(jù)使用場(chǎng)景和運(yùn)行環(huán)境進(jìn)行判斷。如果您的代碼需要兼容老版本的瀏覽器，建議使用第二種方法；如果您的代碼只需要在當(dāng)前較新的瀏覽器中運(yùn)行，建議使用第一種或第三種方法。