js获取当前url的参数

在JavaScript中获取当前URL的参数通常使用URLSearchParams接口，这是处理URL查询字符串的一个非常方便的方法。

基础概念：

• URL参数：URL中?后面的部分，由键值对组成，例如：https://example.com/page?name=John&age=30中的name=John&age=30就是URL参数。
• URLSearchParams：一个用于处理URL查询字符串的接口，提供了很多方法来获取、设置、添加、删除URL参数。

如何获取URL参数：

假设当前URL为https://example.com/page?name=John&age=30，以下是如何使用URLSearchParams来获取这些参数的示例代码：

// 获取当前URL的查询字符串部分
const queryString = window.location.search;

// 创建一个URLSearchParams对象
const urlParams = new URLSearchParams(queryString);

// 使用get方法获取特定参数的值
const name = urlParams.get('name'); // "John"
const age = urlParams.get('age'); // "30"

console.log(name, age);

优势：

• 简单易用：URLSearchParams提供了简洁的API来处理URL参数。
• 兼容性：现代浏览器都支持URLSearchParams，对于不支持的浏览器，可以使用polyfill。

应用场景：

• 获取用户通过URL传递的数据，如搜索关键词、页面状态等。
• 在单页应用（SPA）中，根据URL参数来渲染不同的内容或状态。

常见问题及解决方法：

1. 参数不存在时返回什么？ 使用get方法获取不存在的参数时，会返回null。可以通过检查返回值是否为null来判断参数是否存在。
2. 如何获取所有参数？ 可以使用entries方法来获取所有参数的键值对，然后遍历这些键值对。

for (const [key, value] of urlParams.entries()) {
  console.log(key, value);
}

1. 如何处理特殊字符？ URLSearchParams会自动处理特殊字符，如空格会被转换为+，其他特殊字符会被编码。如果需要解码这些字符，可以使用decodeURIComponent函数。
2. 如何设置或添加参数？ 虽然URLSearchParams主要用于读取参数，但也可以用来设置或添加参数。使用set方法可以设置参数的值，如果参数不存在则会被添加。

urlParams.set('city', 'New York');
// 或者添加新参数
urlParams.append('country', 'USA');

然后，可以使用toString方法将修改后的参数列表转换回查询字符串，并更新到URL中。