URLSearchParams剖析url所在栏参数

一、参考资料

• MDN Web 文档：URLSearchParams
  
• Axios qs库（post传递JSON对象和get请求URL参数的相互转换工具）
  

二、问题阐明

以前经常会使用 axios 库中的 “qs库”,参考 Axios qs库（post传递JSON对象和get请求URL参数的相互转换工具）
偶尔中发现同事写的代码中使用了URLSearchParams类，因此作为条记学习
三、URLSearchParams介绍

3.1 URLSearchParams的来历

在过去，处置惩罚URL查询参数是一项相对繁琐的使命。开发职员必要手动剖析URL，提取查询字符串部分，并对其进行分割息争码。这个过程涉及到很多繁琐的字符串操纵和编码解码步调，容易出错且代码冗长。为了简化这一过程， ECMAScript 2015（ES6）引入了URLSearchParams API。
3.2 URLSearchParams的作用

URLSearchParams的紧张作用是对URL中的查询参数进行剖析、访问和操纵。它提供了一系列的方法，可以方便地执行以下操纵：
剖析URL查询参数： URLSearchParams可以吸收一个URL查询字符串作为输入，并将其剖析为一个可操纵的对象。它自动处置惩罚编码息争码，将查询参数剖析为键值对的形式，方便后续的操纵。
访问查询参数： 通过URLSearchParams提供的方法，可以轻松地访问和获取URL中的查询参数。开发职员可以根据参数名称获取对应的值，大概获取所有参数的迭代器，实现机动的参数访问。
添加和修改查询参数： URLSearchParams答应开发职员动态地添加、修改或删除URL中的查询参数。它提供了一组方法，如append()、set()和delete()，使得对查询参数的修改变得简单明了。
生成查询参数： URLSearchParams不光可以剖析查询参数，还可以将其转换回URL查询字符串的形式。它提供了toString()方法，可以将当前的查询参数对象序列化为标准的URL查询字符串，方便用于URL构建或发送请求等场景。
3.3 快速入门

1. const paramsString = "q=URLUtils.searchParams&topic=api";
2. const searchParams = new URLSearchParams(paramsString);
4. // 迭代查询参数
5. for (let p of searchParams) {
6.   console.log(p);
7. }
9. console.log(searchParams.has("topic")); // true
10. console.log(searchParams.has("topic", "fish")); // false
11. console.log(searchParams.get("topic") === "api"); // true
12. console.log(searchParams.getAll("topic")); // ["api"]
13. console.log(searchParams.get("foo") === null); // true
14. console.log(searchParams.append("topic", "webdev"));
15. console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=api&topic=webdev"
16. console.log(searchParams.set("topic", "More webdev"));
17. console.log(searchParams.toString()); // "q=URLUtils.searchParams&topic=More+webdev"
18. console.log(searchParams.delete("topic"));
19. console.log(searchParams.toString()); // "q=URLUtils.searchParams"

复制代码

3.4 URLSearchParams的方法和属性

URLSearchParams提供了一系列方法和属性，用于剖析、访问和操纵URL中的查询参数。本节将详细介绍URLSearchParams的紧张方法和属性，并提供相关的代码示例。
get(name)
作用：根据参数名称获取对应的值。

1. const params = new URLSearchParams('?name=John&age=30');
2. const name = params.get('name');
3. console.log(name); // 输出：John

复制代码

getAll(name)
作用：根据参数名称获取对应的值数组。

1. const params = new URLSearchParams('?name=John&age=30&name=Alice');
2. const names = params.getAll('name');
3. console.log(names); // 输出：['John', 'Alice']

复制代码

has(name)
作用：判定是否存在指定名称的参数。

1. const params = new URLSearchParams('?name=John&age=30');
2. console.log(params.has('name')); // 输出：true
3. console.log(params.has('gender')); // 输出：false

复制代码

append(name, value)
作用：向URL中添加新的参数。

1. const params = new URLSearchParams('?name=John');
2. params.append('age', '30');
3. console.log(params.toString()); // 输出：'name=John&age=30'

复制代码

set(name, value)
作用：设置指定参数的值，如果参数不存在则添加新参数。

1. const params = new URLSearchParams('?name=John');
2. params.set('name', 'Alice');
3. params.set('age', '30');
4. console.log(params.toString()); // 输出：'name=Alice&age=30'

复制代码

delete(name)
作用：删除指定名称的参数。

1. const params = new URLSearchParams('?name=John&age=30');
2. params.delete('age');
3. console.log(params.toString()); // 输出：'name=John'

复制代码

keys()
作用：返回一个迭代器，用于遍历所有参数的名称。

1. const params = new URLSearchParams('?name=John&age=30');
2. for (const key of params.keys()) {
3.   console.log(key); // 输出：'name', 'age'
4. }

复制代码

values()
作用：返回一个迭代器，用于遍历所有参数的值。

1. const params = new URLSearchParams('?name=John&age=30');
2. for (const value of params.values()) {
3.   console.log(value); // 输出：'John', '30'
4. }

复制代码

entries()
作用：返回一个迭代器，用于遍历所有参数的键值对。

1. const params = new URLSearchParams('?name=John&age=30');
2. for (const [key, value] of params.entries()) {
3.   console.log(`${key}: ${value}`); // 输出：'name: John', 'age: 30'
4. }

复制代码

toString()
作用：将URLSearchParams对象转换为字符串表现形式。

1. const params = new URLSearchParams('?name=John&age=30');
2. const paramString = params.toString();
3. console.log(paramString); // 输出：'name=John&age=30'

复制代码

四、使用示例(剖析url所在)

4.1 获取息争析URL参数

在Web开发中，经常必要获取URL中的参数值进行后续处置惩罚。URLSearchParams提供了简单而强大的方法来获取息争析URL参数。下面是一个示例，演示怎样使用URLSearchParams获取息争析URL中的参数。
假设当前URL为：http://test.com/?name=John&age=25&gender=male

1. // 创建URLSearchParams对象
2. const params = new URLSearchParams(window.location.search);
4. // 获取参数值
5. const name = params.get('name'); // "John"
6. const age = params.get('age'); // "25"
7. const gender = params.get('gender'); // "male"
9. // 输出参数值
10. console.log(`Name: ${name}`);
11. console.log(`Age: ${age}`);
12. console.log(`Gender: ${gender}`);

复制代码

在上述示例中，通过window.location.search获取当前URL的查询参数部分，并使用URLSearchParams对象剖析该参数。通过调用get()方法，可以根据参数名获取对应的值。这样，我们可以轻松地获取URL中的参数值，方便后续的处置惩罚和展示。
4.2 构建和更新URL参数

除了获取息争析URL参数，URLSearchParams还提供了方便的方法来构建和更新URL参数。下面是一个示例，演示怎样使用URLSearchParams来构建和更新URL参数。

1. // 创建URLSearchParams对象
2. const params = new URLSearchParams();
4. // 设置参数
5. params.set('name', 'John');
6. params.set('age', '25');
8. // 追加参数
9. params.append('gender', 'male');
10. params.append('hobby', 'reading');
12. // 获取参数字符串
13. const queryString = params.toString(); // "name=John&age=25&gender=male&hobby=reading"
15. // 构建URL
16. const url = `http://test.com/?${queryString}`;
18. console.log(url);

复制代码

五、注意事项

在使用URLSearchParams时，有几个注意事项必要我们注意：
欣赏器兼容性
URLSearchParams是一个相对较新的Web API，在旧版本的欣赏器中可能不被支持。在使用URLSearchParams之前，要确保目标欣赏器的兼容性。如果必要在旧版欣赏器中使用，可以思量使用替换方案。
URL参数格式
URLSearchParams盼望的URL参数格式是key=value，多个参数之间使用&分隔。在使用URLSearchParams之前，要确保URL参数的格式是正确的，否则可能导致剖析错误或获取参数值失败。
参数值编码
URLSearchParams会自动对参数值进行编码，以确保URL的正确性和安全性。但在某些情况下，如果参数值已经被编码，使用URLSearchParams可能会导致重复编码或编码错误的问题。在这种情况下，我们可以手动对参数值进行编码或解码，以制止问题的发生。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。