在前端開發(fā)中,經常需要獲取URL中的參數,以便動態(tài)地顯示或生成相關內容。在Javascript中,可以通過以下方法接收URL參數。
1、使用location.search
可以使用location對象的search屬性獲取URL的查詢字符串(?后面的內容),然后使用正則表達式或字符串操作方法解析出需要的參數值。
示例代碼:
//獲取URL中的查詢字符串
var searchStr = location.search;//去掉查詢字符串中的問號,然后將參數變成數組
var paramsArr = searchStr.substr(1).split("&");//將數組中的參數名和參數值分開
var paramsObj = {};
for(var i=0;i<paramsArr.length;i++){
var keyValue = paramsArr[i].split("=");
paramsObj[keyValue[0]] = keyValue[1];
}//使用參數名獲取參數值
var id = paramsObj.id;
在上面的示例代碼中,我們首先使用location.search獲取URL中的查詢字符串,然后使用substr去掉第一個字符(問號),再使用split方法將參數變成一個數組。接下來,我們使用循環(huán)和split方法分別將參數名和參數值分開,最后將參數名作為對象的鍵值,參數值作為對象的屬性值,并使用參數名獲取參數值。
2、使用正則表達式
除了使用字符串操作方法之外,我們還可以使用正則表達式來解析URL中的參數。
示例代碼://匹配查詢字符串中的參數名和參數值
var reg = new RegExp("(^|&)id=([^&]*)(&|$)");
var result = location.search.substr(1).match(reg);
var id = result[2];
在上面的示例代碼中,我們使用正則表達式匹配查詢字符串中的id參數,并使用match方法匹配結果。最后,我們通過result數組的第二個元素獲取參數值。
3、使用URLSearchParams
在ES6中,可以使用URLSearchParams對象快速解析URL中的參數。例如://創(chuàng)建URLSearchParams對象
var searchParams = new URLSearchParams(location.search);//獲取參數
var id = searchParams.get("id");
在上面的示例代碼中,我們首先創(chuàng)建了一個URLSearchParams對象,然后使用get方法快速獲取id參數的值。
總結:
以上是Javascript接收URL參數的三種方法,分別是使用location對象的search屬性、正則表達式和URLSearchParams對象。我們可以根據實際需求選擇合適的方法來解析URL中的參數。上一篇python畫小雞6