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

总结

上面介绍的三种方法可以帮助我们获取到链接中的参数，对于前端开发有很大的作用。同时，由于网络和浏览器的差异，有时候这些方法并不适用于某些场景，需要我们根据具体情况进行改进。