JavaScript 获取 URL 查询参数及 Location 对象详解

获取 URL 查询参数

一、获取 URL 的 querystring 参数

在 JavaScript 开发中，提取 URL 查询字符串（querystring）中的参数是常见需求，主要可以通过以下两种实现方式完成。

1.1 方法一：正则匹配

//获取url中的参数
function getQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数
  var result = window.location.search.substr(1).match(reg); // 对querystring匹配目标参数
  if (result != null) {
    return decodeURIComponent(result[2]);
  } else {
    return null;
  }
}

假设当前 URL 为 http://localhost/index.html?q1=abc&q2=efg&q3=h，若需获取参数 q1 的值，可使用正则表达式进行匹配提取。

var q1 = getQueryString('q1'); // abc

1.2 方法二：split 分割

function getQueryString() {  
  var qs = location.search.substr(1), // 获取url中"?"符后的字串  
    args = {}, // 保存参数数据的对象
    items = qs.length ? qs.split("&") : [], // 取得每一个参数项,
    item = null,
    len = items.length;

  for(var i = 0; i < len; i++) {
    item = items[i].split("=");
    var name = decodeURIComponent(item[0]),
      value = decodeURIComponent(item[1]);
    if(name) {
      args[name] = value;
    }
  }
  return args;
}

针对相同的 URL http://localhost/index.html?q1=abc&q2=efg&q3=h，通过 split 方法分割字符串也是获取 q1 参数值的另一种有效途径。

var qs = getQueryString(); 

var q1 = qs["q1"]; // abc

上述两种 getQueryString() 方法均能高效解决 URL 查询参数的提取问题。在此基础上，进一步整理 Location 对象的特性，有助于后续相关功能的开发与维护。

Location 对象属性与方法

二、Location 对象的属性

以下说明以 http://localhost:80/dir/index.html?q1=abc&q2=efg&q3=h#anchor 为例进行解析。

Location 对象包含的 8 个属性均支持读写操作。

修改 location.href 会导致页面跳转至新的 URL；而修改 location.hash 则仅在当前页面内跳转至指定的锚点位置，不触发重新加载。

除 hash 属性外，修改 window.location 的其他属性都会导致页面以新 URL 重新加载，并在浏览器历史记录中生成一条新记录。

三、Location 对象的方法

其中，location.assign(url) 的执行效果与以下两行代码完全一致：

window.location = url;
location.href = url;

需要注意的是，位于 location.reload() 调用之后的代码是否执行，取决于网络延迟或系统资源状况。因此，建议将 location.reload() 放置在代码块的最后一行，以确保操作完成。

总结

以上内容涵盖了本文的核心知识点，希望能为读者的学习或工作提供实际帮助。如有任何疑问，欢迎留言交流。