URLSearchParams解析url地址栏参数

文章目录

• 一、参考资料
• 二、问题说明
• 三、URLSearchParams 介绍
• • 3.1 URLSearchParams 的来历
  • 3.2 URLSearchParams 的作用
  • 3.3 快速入门
  • 3.4 URLSearchParams 的方法和属性
• 四、使用示例(解析 url 地址)
• • 4.1 获取和解析 URL 参数
  • 4.2 构建和更新 URL 参数
• 五、注意事项

一、参考资料

1. MDN Web 文档：URLSearchParams
2. 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 快速入门

const paramsString = "q=URLUtils.searchParams&topic=api";
const searchParams = new URLSearchParams(paramsString);


for (let p of searchParams) {
  console.log(p);
}

console.log(searchParams.has("topic")); 
console.log(searchParams.has("topic", "fish")); 
console.log(searchParams.get("topic") === "api"); 
console.log(searchParams.getAll("topic")); 
console.log(searchParams.get("foo") === null); 
console.log(searchParams.append("topic", "webdev"));
console.log(searchParams.toString()); 
console.log(searchParams.set("topic", "More webdev"));
console.log(searchParams.toString()); 
console.log(searchParams.delete("topic"));
console.log(searchParams.toString()); 

3.4 URLSearchParams 的方法和属性

URLSearchParams 提供了一系列方法和属性，用于解析、访问和操作 URL 中的查询参数。本节将详细介绍 URLSearchParams 的主要方法和属性，并提供相关的代码示例。

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

const params = new URLSearchParams('?name=John&age=30');
const name = params.get('name');
console.log(name); 

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

const params = new URLSearchParams('?name=John&age=30&name=Alice');
const names = params.getAll('name');
console.log(names); 

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

const params = new URLSearchParams('?name=John&age=30');
console.log(params.has('name')); 
console.log(params.has('gender')); 

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

const params = new URLSearchParams('?name=John');
params.append('age', '30');
console.log(params.toString()); 

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

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

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

const params = new URLSearchParams('?name=John&age=30');
params.delete('age');
console.log(params.toString()); 

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

const params = new URLSearchParams('?name=John&age=30');
for (const key of params.keys()) {
  console.log(key); 
}

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

const params = new URLSearchParams('?name=John&age=30');
for (const value of params.values()) {
  console.log(value); 
}

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

const params = new URLSearchParams('?name=John&age=30');
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`); 
}

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

const params = new URLSearchParams('?name=John&age=30');
const paramString = params.toString();
console.log(paramString); 

四、使用示例(解析 url 地址)

4.1 获取和解析 URL 参数

在 Web 开发中，经常需要获取 URL 中的参数值进行后续处理。URLSearchParams 提供了简单而强大的方法来获取和解析 URL 参数。下面是一个示例，演示如何使用 URLSearchParams 获取和解析 URL 中的参数。

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

const params = new URLSearchParams(window.location.search);


const name = params.get('name'); 
const age = params.get('age'); 
const gender = params.get('gender'); 


console.log(`Name: ${name}`);
console.log(`Age: ${age}`);
console.log(`Gender: ${gender}`);

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

4.2 构建和更新 URL 参数

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

const params = new URLSearchParams();


params.set('name', 'John');
params.set('age', '25');


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


const queryString = params.toString(); 


const url = `http://test.com/?${queryString}`;

console.log(url);

五、注意事项

在使用 URLSearchParams 时，有几个注意事项需要我们注意：

浏览器兼容性
URLSearchParams 是一个相对较新的 Web API，在旧版本的浏览器中可能不被支持。在使用 URLSearchParams 之前，要确保目标浏览器的兼容性。如果需要在旧版浏览器中使用，可以考虑使用替代方案。

URL 参数格式
URLSearchParams 期望的 URL 参数格式是 key=value，多个参数之间使用 & 分隔。在使用 URLSearchParams 之前，要确保 URL 参数的格式是正确的，否则可能导致解析错误或获取参数值失败。

参数值编码
URLSearchParams 会自动对参数值进行编码，以确保 URL 的正确性和安全性。但在某些情况下，如果参数值已经被编码，使用 URLSearchParams 可能会导致重复编码或编码错误的问题。在这种情况下，我们可以手动对参数值进行编码或解码，以避免问题的发生。