JS手写从URL中获取指定参数(3种方式)

1,767 阅读2分钟

今天是中秋假期的第二天,今天来复习下从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。