可以使用 JavaScript 中的 URL 对象来操作 URL 和查询参数。以下是一些常见的方法:
window.location.href
来获取当前页面的 URL。
const currentUrl = window.location.href;
console.log(currentUrl);
URLSearchParams
对象来获取 URL 的查询参数。这个对象提供了很多有用的方法,比如获取、设置、追加、删除查询参数等。
// 假设 URL 是 https://example.com/?name=John&age=30
const urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get('name')); // 输出 "John"
console.log(urlParams.get('age')); // 输出 "30"
URLSearchParams
对象的 set
方法来更新查询参数。需要注意的是,这个方法会替换掉原来的查询参数。
// 假设 URL 是 https://example.com/?name=John&age=30
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('name', 'Tom'); // 更新 name 参数
window.location.search = urlParams.toString(); // 将更新后的查询参数设置到 URL 上
URLSearchParams
对象的 append
方法来追加新的查询参数。
// 假设 URL 是 https://example.com/?name=John&age=30
const urlParams = new URLSearchParams(window.location.search);
urlParams.append('city', 'Beijing'); // 追加新的查询参数
window.location.search = urlParams.toString(); // 将更新后的查询参数设置到 URL 上
以上是 JavaScript 操作 URL 和查询参数的一些常见方法。除此之外,还有很多其他的方法可以使用。