今天是中秋假期的第二天,今天来复习下从URL中获取参数,JavaScript中并没有内置获取URL参数的方法,这是个非常常用的需求,几乎每个项目都会用得到。不知道大家在项目中是自己写,还是用现成的呢?
现代方式
在现代浏览器中,我们可以使用浏览器提供的URL
对象来获取参数。
这里方法最简单,bug少,不用我们操心。
function getQueryString(name) {
const url_string = "https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
const url = new URL(url_string);
return url.searchParams.get(name);
}
console.log(getQueryString('name')) // mick
console.log(getQueryString('age')) // 20
老式循环法
在较老的浏览器里也能够使用,兼容性没有任何问题,但自己写的话比较费事,也可能产生bug。
当然也可以找其他人写好的,但也可能有bug被坑。
function getQueryString(name) {
var url_string = "https://www.baidu.com/t.html?name=mick&age=20"; // window.location.href
var params = url_string.split('?')[1]; // 获取?号后面的参数 name=mick&age=20
if (!params) return null; // 如果无参,返回null
var vars = params.split("&"); // 将参数分割成数组 ['name=mick', 'age=20']
var query_string = {};
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("="); // 将参数的key和值进行分割成 ['name', 'mick']
var key = decodeURIComponent(pair[0]); // 参数key
var value = decodeURIComponent(pair[1]); // 参数值
if (name === key) { // 如果匹配到对应key返回
return value;
}
}
return null;
}
console.log(getQueryString('name')) // mick
console.log(getQueryString('age')) // 20
正则循环法
使用正则实现代码量也比较少,兼容性也不错
function getQueryString(name) {
var query_string = "?name=mick&age=20"; // window.location.search
if (!query_string) return null; // 如果无参,返回null
var re = /[?&]?([^=]+)=([^&]*)/g;
var tokens;
while (tokens = re.exec(query_string)) {
if (decodeURIComponent(tokens[1]) === name) {
return decodeURIComponent(tokens[2]);
}
}
return null;
}
console.log(getQueryString('name')) // mick
console.log(getQueryString('age')) // 20
总结
上面总结了三种方法,当然在网上能搜索到方法也有很多,作为一名优秀的前端工程师,我们要弄懂其中的原理,自己尝试去写写。
欢迎大家在评论区提供自己的思路,找找我写的bug。