使用 js 获取 url 参数 - Javascript

在 Web 开发中，经常需要获取 url 中的参数以便用于页面数据的渲染和处理。在本文中，我们将介绍通过 Javascript 来获取 url 参数的方法，并提供具体代码示例。

方法一：使用 window.location.search 属性

在浏览器的 Javascript 环境中，可以使用 window.location.search 属性来获取 URL 中的查询字符串，它是在问号（?）后面的部分。例如，对于以下 URL：

http://example.com/?name=john&age=30

我们可以使用以下代码来获取查询参数：

const query = window.location.search;

console.log(query); // 输出 ?name=john&age=30

然而，这种方式只能获取到 URL 中的查询字符串，而不能获取 hash 值。

方法二：使用 URLSearchParams API

URLSearchParams 是浏览器原生的 API，可以用来处理查询字符串。我们可以使用以下代码获取 URL 中的查询参数：

const params = new URLSearchParams(window.location.search);

console.log(params.get('name')); // 输出 'john'
console.log(params.get('age')); // 输出 '30'

这种方式可以很方便地获取查询参数，并且可以支持多值参数。例如：

http://example.com/?name=john&skills=javascript&skills=python

可以通过以下代码获取 skills 参数的值：

const skills = params.getAll('skills');

console.log(skills); // 输出 ['javascript', 'python']

方法三：手动解析查询参数

如果你不想使用原生 API，也可以使用手动解析的方法来获取查询参数。以下代码可以解析 URL 中的查询参数：

const query = window.location.search.substr(1);
const params = {};

query.split('&').forEach((param) => {
  const [key, value] = param.split('=').map(decodeURIComponent);
  params[key] = value;
});

console.log(params.name); // 输出 'john'
console.log(params.age); // 输出 '30'

这种方式虽然比较繁琐，但能够支持获取 hash 值中的参数。

总结

以上就是几种通过 Javascript 获取 URL 参数的方法。无论使用哪种方法，都可以方便地获取 URL 中的参数并用于页面的处理。