如何在 JavaScript 中更改 URL 的查询参数

有时候我们需要在 JavaScript 中更改 URL 的查询参数，这可以帮助我们在浏览器中动态地添加、修改或删除查询参数。下面是一些方法来实现这个目标。

使用 URLSearchParams 对象

URLSearchParams 对象是 URL API 的一部分，它提供了一组方法来处理 URL 查询参数。

获取查询参数的值

下面的代码片段演示了如何获取 URL 查询参数的值：

// 假设当前 URL 为：http://example.com/?name=John&age=30

const params = new URLSearchParams(window.location.search);
const name = params.get('name'); // 'John'
const age = params.get('age'); // '30'

设置查询参数的值

下面的代码片段演示了如何设置 URL 查询参数的值：

// 假设当前 URL 为：http://example.com/

const params = new URLSearchParams(window.location.search);
params.set('name', 'John');
params.set('age', '30');

// 更新 URL 的查询参数并重新加载页面
window.location.search = params.toString();

删除查询参数

下面的代码片段演示了如何删除 URL 查询参数：

// 假设当前 URL 为：http://example.com/?name=John&age=30

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

// 更新 URL 的查询参数并重新加载页面
window.location.search = params.toString();

使用正则表达式

如果不想依赖 URL API，你还可以使用正则表达式来处理 URL 查询参数。

获取查询参数的值

下面的代码片段演示了如何使用正则表达式获取 URL 查询参数的值：

// 假设当前 URL 为：http://example.com/?name=John&age=30

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const name = urlParams.get('name'); // 'John'
const age = urlParams.get('age'); // '30'

设置查询参数的值

下面的代码片段演示了如何使用正则表达式设置 URL 查询参数的值：

// 假设当前 URL 为：http://example.com/

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
urlParams.set('name', 'John');
urlParams.set('age', '30');

// 更新 URL 的查询参数并重新加载页面
window.location.search = '?' + urlParams.toString();

删除查询参数

下面的代码片段演示了如何使用正则表达式删除 URL 查询参数：

// 假设当前 URL 为：http://example.com/?name=John&age=30

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
urlParams.delete('name');

// 更新 URL 的查询参数并重新加载页面
window.location.search = '?' + urlParams.toString();

以上是在 JavaScript 中更改 URL 的查询参数的几种方法。根据你的需求选择适合的方法，这将帮助你轻松地操作 URL 查询参数。