如何使用 jQuery 或纯 JavaScript 获取 URL 参数

在前端开发中，获取 URL 参数是很常见的需求，比如根据 URL 中的参数来展示不同的内容。本文将介绍如何使用 jQuery 或纯 JavaScript 获取 URL 参数。

使用纯 JavaScript 获取 URL 参数

使用纯 JavaScript 获取 URL 参数需要用到 window.location.search 属性。这个属性返回的是 URL 中问号（?）后面的部分，包括问号。例如，对于以下 URL：

https://example.com/page.html?name=John&age=30

window.location.search 返回的就是：

?name=John&age=30

接下来，我们可以使用字符串的方法将其解析成对象。

function getUrlParams() {
  const params = {};
  const search = window.location.search;
  if (search) {
    const queryString = search.substr(1);
    const pairs = queryString.split('&');
    for (let i = 0; i < pairs.length; i++) {
      const [key, value] = pairs[i].split('=');
      params[key] = decodeURIComponent(value);
    }
  }
  return params;
}

// 使用示例：
console.log(getUrlParams().name); // 'John'
console.log(getUrlParams().age); // '30'

上面的代码中，getUrlParams 函数会返回一个包含 URL 参数的对象。首先获取 window.location.search，然后去掉问号，再通过 split 方法将其分隔成键值对数组，最后将每个键值对存入对象中。

需要注意的是，URL 参数需要被解码，这里使用了 decodeURIComponent 方法。如果没有参数，函数会返回一个空对象。

使用 jQuery 获取 URL 参数

jQuery 的 $.param 方法可以将一个对象序列化为 URL 参数格式，如 name=John&age=30。而 $.parseParams 方法则可以将 URL 参数解析为对象。

function getUrlParams() {
  const params = {};
  const search = window.location.search;
  if (search) {
    const queryString = search.substr(1);
    params = $.parseParams(queryString);
  }
  return params;
}

// 使用示例：
console.log(getUrlParams().name); // 'John'
console.log(getUrlParams().age); // '30'

上面的代码中，getUrlParams 函数的实现与上面的纯 JavaScript 版本类似。唯一的区别是，解析查询字符串时使用了 $.parseParams 方法。

需要注意的是，如果没有参数，$.parseParams 方法返回的是一个空对象，而不是 null 或 undefined。

总结

本文介绍了如何使用 jQuery 或纯 JavaScript 获取 URL 参数。纯 JavaScript 的实现需要手动解析查询字符串，而 jQuery 则提供了方便的方法。无论是哪种方法，都可以满足大多数情况下的需求。