JavaScript如何獲取鏈接參數

在前端開發中，常常需要獲取來自鏈接的參數以便進行相應的操作。下面將介紹幾種JavaScript獲取鏈接參數的方法。

獲取單個參數

我們先來看如何獲取鏈接中的單個參數。通過JavaScript的location對象可以獲取當前頁面的鏈接地址。使用location.search可以獲取到鏈接后綴（即問號之后的內容），我們可以對這個字符串進行處理，從中獲取單個參數。例如：

function getParameter(parameter) {
var parameters = decodeURIComponent(location.search).substr(1).split('&');
for (var i = 0; i< parameters.length; i++) {
var name = parameters[i].split('=')[0];
var value = parameters[i].split('=')[1];
if (name == parameter) {
return value;
}
}
return null;
}
// 假設鏈接為 http://example.com?id=123&name=foo
var id = getParameter('id');
console.log(id); // 123

這個函數的原理是對鏈接后綴進行解碼，然后用split方法分割成多個參數，最后遍歷這些參數再用split方法分割出參數名和參數值。如果參數名等于我們要獲取的參數名，則返回參數值。如果沒有找到目標參數，則返回null。

獲取所有參數

如果要一次性獲取所有的參數，可以使用類似以下的代碼：

function getParameters() {
var parameters = {};
var parts = decodeURIComponent(location.search.substr(1)).split('&');
for (var i = 0; i< parts.length; i++) {
var parameter = parts[i].split('=');
var name = parameter[0];
var value = parameter[1];
if (typeof parameters[name] === 'undefined') {
parameters[name] = [];
}
parameters[name].push(value);
}
return parameters;
}
// 假設鏈接為 http://example.com?id=123&id=456&name=foo
var parameters = getParameters();
console.log(parameters.id); // ['123', '456']
console.log(parameters.name); // ['foo']

這個函數的實現方法與第一個例子類似，不過把獲取單個參數改為了獲取所有參數。由于同一個參數可以有多個值，所以使用了數組來存儲每個參數的值。

獲取hash值參數

如果鏈接的hash值中包含參數，可以使用location.hash獲取到。同樣可以用類似第一個例子的方法獲取其中的參數。例如：

function getHashParameter(parameter) {
var parameters = decodeURIComponent(location.hash.substr(1)).split('&');
for (var i = 0; i< parameters.length; i++) {
var parameterParts = parameters[i].split('=');
var name = parameterParts[0];
var value = parameterParts[1];
if (name == parameter) {
return value;
}
}
return null;
}
// 假設鏈接為 http://example.com/#id=123&name=foo
var id = getHashParameter('id');
console.log(id); // 123

總結

上面介紹的三種方法可以幫助我們獲取到鏈接中的參數，對于前端開發有很大的作用。同時，由于網絡和瀏覽器的差異，有時候這些方法并不適用于某些場景，需要我們根據具體情況進行改進。