JavaScript中获取URL变量

在前端开发中，我们经常需要获取URL中的参数来进行相应的逻辑处理。这篇文章将介绍如何使用JavaScript获取URL变量。

1. 获取当前URL

在JavaScript中，可以通过window.location.href来获取当前页面的URL。

var currentUrl = window.location.href;
console.log(currentUrl);
// https://www.example.com/index.html?name=John&age=25

2. 获取URL参数

2.1 按名称获取URL参数

可以通过window.location.search来获取URL中的参数部分，然后使用正则表达式或者其他方式来解析出参数值。

// 获取URL参数字符串
var paramsString = window.location.search;
// 解析URL参数，存储到对象中
var searchParams = new URLSearchParams(paramsString);
// 获取名为'name'的参数的值
var name = searchParams.get('name');
console.log(name); // John
// 获取名为'age'的参数的值
var age = searchParams.get('age');
console.log(age); // 25

另外，如果需要支持IE浏览器，可以使用以下兼容性写法：

// 获取URL参数字符串
var paramsString = window.location.search;
// 解析URL参数，存储到对象中
var searchParams = new URLSearchParams(paramsString);
// 获取名为'name'的参数的值
var name = searchParams.get('name');
console.log(name); // John
// 获取名为'age'的参数的值
var age = searchParams.get('age');
console.log(age); // 25

2.2 获取所有URL参数

如果需要获取URL中所有的参数，可以使用以下代码：

// 获取所有的URL参数
var paramsString = window.location.search;
// 解析URL参数，存储到对象中
var searchParams = new URLSearchParams(paramsString);
// 遍历所有参数
for (var pair of searchParams.entries()) {
  console.log(pair[0] + ": " + pair[1]);
}

3. 获取URL hash

URL hash指的是URL中#后面的内容，可以通过window.location.hash来获取当前页面的hash值。

var hash = window.location.hash;
console.log(hash); // #section2

4. 总结

本文介绍了如何使用JavaScript获取URL中的参数和hash值。开发者可以根据自己的需求选择相应的方法来处理URL参数，从而实现特定的业务逻辑。