访问和操作URL中的查询参数

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

constparams =newURLSearchParams('?name=John');params.append('age','30');console.log(params.toString());// 输出：'name=John&age=30'

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

// 创建URLSearchParams对象constparams =newURLSearchParams();// 设置参数params.set('name','John');params.set('age','25');// 追加参数params.append('gender','male');params.append('hobby','reading');// 获取参数字符串constqueryString =params.toString();// "name=John&age=25&gender=male&hobby=reading"// 构建URLconsturl =`http://test.com/?${queryString}`;console.log(url);

五、

URL参数格式
URLSearchParams期望的URL参数格式是key=value，多个参数之间使用&分隔。使用示例(解析url地址)

4.1 获取和解析URL参数

在Web开发中，经常需要获取URL中的参数值进行后续处理。这个过程涉及到很多繁琐的字符串操作和编码解码步骤，容易出错且代码冗长。它提供了一系列的方法，可以方便地执行以下操作：

解析URL查询参数：URLSearchParams可以接收一个URL查询字符串作为输入，并将其解析为一个可操作的对象。

constparams =newURLSearchParams('?name=John&age=30');params.delete('age');console.log(params.toString());// 输出：'name=John'

keys()
作用：返回一个迭代器，用于遍历所有参数的名称。在这种情况下，我们可以手动对参数值进行编码或解码，以避免问题的发生。使用示例(解析url地址)

• 4.1 获取和解析URL参数
• 4.2 构建和更新URL参数

• 3.1 URLSearchParams的来历
• 3.2 URLSearchParams的作用
• 3.3 快速入门
• 3.4 URLSearchParams的方法和属性

3.2 URLSearchParams的作用

URLSearchParams的主要作用是对URL中的查询参数进行解析、参考资料

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

二、在使用URLSearchParams之前，要确保URL参数的格式是正确的，否则可能导致解析错误或获取参数值失败。

constparams =newURLSearchParams('?name=John&age=30');console.log(params.has('name'));// 输出：trueconsole.log(params.has('gender'));// 输出：false

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

3.3 快速入门

constparamsString ="q=URLUtils.searchParams&topic=api";constsearchParams =newURLSearchParams(paramsString);// 迭代查询参数for(letp ofsearchParams){console.log(p);}console.log(searchParams.has("topic"));// trueconsole.log(searchParams.has("topic","fish"));// falseconsole.log(searchParams.get("topic")==="api");// trueconsole.log(searchParams.getAll("topic"));// ["api"]console.log(searchParams.get("foo")===null);// trueconsole.log(searchParams.append("topic","webdev"));console.log(searchParams.toString());// "q=URLUtils.searchParams&topic=api&topic=webdev"console.log(searchParams.set("topic","More webdev"));console.log(searchParams.toString());// "q=URLUtils.searchParams&topic=More+webdev"console.log(searchParams.delete("topic"));console.log(searchParams.toString());// "q=URLUtils.searchParams"

3.4 URLSearchParams的方法和属性

URLSearchParams提供了一系列方法和属性，用于解析、

constparams =newURLSearchParams('?name=John&age=30');constparamString =params.toString();console.log(paramString);// 输出：'name=John&age=30'

四、set()和delete()，使得对查询参数的修改变得简单明了。

constparams =newURLSearchParams('?name=John&age=30');for(constvalue ofparams.values()){console.log(value);// 输出：'John', '30'}

entries()
作用：返回一个迭代器，用于遍历所有参数的键值对。它提供了toString()方法，可以将当前的查询参数对象序列化为标准的URL查询字符串，方便用于URL构建或发送请求等场景。

constparams =newURLSearchParams('?name=John&age=30');for(const[key,value]ofparams.entries()){console.log(`${key}: ${value}`);// 输出：'name: John', 'age: 30'}

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

添加和修改查询参数：URLSearchParams允许开发人员动态地添加、

constparams =newURLSearchParams('?name=John&age=30');constname =params.get('name');console.log(name);// 输出：John

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

参数值编码
URLSearchParams会自动对参数值进行编码，以确保URL的正确性和安全性。它自动处理编码和解码，将查询参数解析为键值对的形式，方便后续的操作。访问和操作URL中的查询参数。

constparams =newURLSearchParams('?name=John&age=30');for(constkey ofparams.keys()){console.log(key);// 输出：'name', 'age'}

values()
作用：返回一个迭代器，用于遍历所有参数的值。开发人员需要手动解析URL，提取查询字符串部分，并对其进行分割和解码。如果需要在旧版浏览器中使用，可以考虑使用替代方案。这样，我们可以轻松地获取URL中的参数值，方便后续的处理和展示。为了简化这一过程， ECMAScript 2015（ES6）引入了URLSearchParams API。下面是一个示例，演示如何使用URLSearchParams来构建和更新URL参数。本节将详细介绍URLSearchParams的主要方法和属性，并提供相关的代码示例。URLSearchParams提供了简单而强大的方法来获取和解析URL参数。在使用URLSearchParams之前，要确保目标浏览器的兼容性。访问和操作。但在某些情况下，如果参数值已经被编码，使用URLSearchParams可能会导致重复编码或编码错误的问题。

constparams =newURLSearchParams('?name=John&age=30&name=Alice');constnames =params.getAll('name');console.log(names);// 输出：['John', 'Alice']

has(name)
作用：判断是否存在指定名称的参数。下面是一个示例，演示如何使用URLSearchParams获取和解析URL中的参数。开发人员可以根据参数名称获取对应的值，或者获取所有参数的迭代器，实现灵活的参数访问。

假设当前URL为：http://test.com/?name=John&age=25&gender=male

// 创建URLSearchParams对象constparams =newURLSearchParams(window.location.search);// 获取参数值constname =params.get('name');// "John"constage =params.get('age');// "25"constgender =params.get('gender');// "male"// 输出参数值console.log(`Name: ${name}`);console.log(`Age: ${age}`);console.log(`Gender: ${gender}`);

在上述示例中，通过window.location.search获取当前URL的查询参数部分，并使用URLSearchParams对象解析该参数。注意事项