URLSearchParams 方法的使用。 格式化url。制作 链接 制作 url

当然可以介绍URLSearchParams这个方法。URLSearchParams是JavaScript中的一个内置类，用于处理URL查询字符串（query string）的解析和构建。查询字符串是URL中位于问号（?）后面的部分，用于传递参数和对应的值。

基本用法

URLSearchParams提供了多种方式来进行初始化，常见的有三种：

1. 通过字符串初始化：

javascript复制代码

const params = new URLSearchParams('?name=John&age=30');

1. 通过URL对象的searchParams属性：

javascript复制代码

const url = new URL('https://example.com?name=John&age=30');

const paramsFromUrl = url.searchParams;

1. 通过对象初始化：

javascript复制代码

const params = new URLSearchParams({name: 'John', age: '30', hobby: 'coding'});

主要方法

1. get(name)：获取指定名称的参数值。如果存在多个同名参数，则返回第一个参数的值。如果参数不存在，则返回null。

2. getAll(name)：获取指定名称的所有参数值，返回一个数组。

3. has(name)：检查查询字符串中是否存在指定名称的参数。如果存在，则返回true，否则返回false。

4. append(name, value)：向查询字符串中添加一个新的参数。如果参数已存在，不会覆盖原有的值，而是追加一个新的值。

5. set(name, value)：设置指定名称的参数值。如果参数已存在，则会替换为新的值。如果参数不存在，则添加新的参数。

6. delete(name)：从查询字符串中删除指定的参数。

7. toString()：将URLSearchParams对象转换为字符串表示形式，返回查询字符串。

8. sort()（非标准，但某些实现中可用）：按照参数名称对查询字符串中的参数进行排序。

9. forEach()：遍历查询字符串中的所有参数和值，对每个参数执行提供的回调函数。

10. entries()、keys()、values()：分别返回一个迭代器，该迭代器包含了所有查询参数的键值对、键集合和值集合。

实际应用场景

1. 构造查询参数：在构建需要动态生成URL的应用时，URLSearchParams可以很方便地生成复杂的查询字符串。

2. 从URL中获取参数并操作：在单页应用（SPA）中，常常需要根据用户的操作动态地更新URL中的查询参数。可以使用set()和delete()方法来实现这一点。

3. 处理特殊字符：URLSearchParams会自动处理参数中的特殊字符，例如空格、符号等，不需要手动编码或解码。

示例代码

javascript复制代码

// 初始化URLSearchParams对象  

const params = new URLSearchParams('?name=John&age=30&hobby=coding');



// 获取参数值  

const name = params.get('name'); // 'John'  

const hobbies = params.getAll('hobby'); // ['coding']  



// 检查参数是否存在  

const hasAge = params.has('age'); // true  



// 追加参数  

params.append('hobby', 'reading');

console.log(params.toString()); // 'name=John&age=30&hobby=coding&hobby=reading'  



// 设置参数值  

params.set('name', 'Jane');

console.log(params.toString()); // 'name=Jane&age=30&hobby=coding&hobby=reading'  



// 删除参数  

params.delete('age');

console.log(params.toString()); // 'name=Jane&hobby=coding&hobby=reading'  



// 遍历参数  

for (const [key, value] of params.entries()) {

console.log(`${key}: ${value}`);

}

总的来说，URLSearchParams是一个功能强大且易于使用的工具，用于解析、操作和生成URL查询参数。