在 URL 中设置和获取变量 - JavaScript

在Web开发中，我们经常需要从 URL 中获取并设置变量，以便我们能够展示不同的内容或执行不同的操作。在JavaScript中，我们可以使用URLSearchParams对象来方便地获取和设置URL参数。

获取URL参数

要从URL中获取参数，我们可以使用window.location.search属性。该属性包含当前URL中的查询字符串（即URL中的“？”后面的所有内容），我们可以使用URLSearchParams对象来解析它。

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const myParam = urlParams.get('myParam');
console.log(myParam); // 输出myParam的值

在上面的代码片段中，我们首先使用window.location.search获取当前URL中的查询字符串，然后使用URLSearchParams来解析它。最后，我们使用get方法从URLSearchParams对象中获取参数的值，并将其赋值给myParam变量。

设置URL参数

要设置URL参数，我们可以使用URLSearchParams对象的set方法。我们先获取当前URL的查询字符串，然后使用URLSearchParams对象来修改或添加参数。

const urlParams = new URLSearchParams(window.location.search);
urlParams.set('myParam', 'myValue');
const newUrl = window.location.pathname + '?' + urlParams.toString();
window.history.pushState({}, '', newUrl);

在上面的代码片段中，我们首先使用URLSearchParams对象获取当前URL的查询字符串。然后，我们使用set方法将myParam参数的值设置为myValue。接下来，我们使用toString方法将修改后的URLSearchParams对象转换为字符串。最后，我们使用history.pushState方法将新的URL添加到浏览器历史记录中，并更新当前页面的URL。

结论

使用URLSearchParams对象可以轻松地从URL中获取和设置参数，帮助我们动态地展示不同的内容或执行不同的操作。上面的代码片段仅仅是使用URLSearchParams对象的一个例子，你可以根据自己的需求来动态地操作当前页面的URL。