URLSearchParams

JavaScript 中的 URL() 和 URLSearchParams() 是两个与 URL 处理相关的 Web API，它们提供了创建、解析、修改 URL 以及操作查询字符串的方法。

URL()

URL() 构造函数用于创建一个表示 URL 的对象。它允许开发者解析一个 URL 并访问其组成部分，如协议、主机名、路径、查询字符串等。使用 URL() 可以很容易地获取 URL 的各个部分，并且可以对它们进行操作。

创建和使用 URL 对象

const url = new URL('https://example.com/path?name=ferret&color=purple');
console.log(url.href);      // 输出：https://example.com/path?name=ferret&color=purple
console.log(url.protocol);  // 输出：https:
console.log(url.host);      // 输出：example.com
console.log(url.hostname);  // 输出：example.com
console.log(url.pathname);  // 输出：/path
console.log(url.search);    // 输出：?name=ferret&color=purple

修改 URL

URL() 对象的属性，如 search、hostname、pathname 和 hash，都是可写的，这意味着可以修改它们并相应地更新 URL。

URLSearchParams()

URLSearchParams 对象提供了一种方便的方法来处理 URL 中的查询字符串。它允许开发者获取、设置、更新或删除查询参数。

创建和使用 URLSearchParams 对象

const searchParams = new URLSearchParams('name=ferret&color=purple');
console.log(searchParams.get('name'));    // 输出：ferret
console.log(searchParams.get('color'));   // 输出：purple
searchParams.set('color', 'orange');
console.log(searchParams.toString());    // 输出：name=ferret&color=orange

操作方法

• append(name, value): 向查询字符串添加一个新的键值对。
• delete(name): 从查询字符串中删除指定的参数。
• get(name): 获取指定参数的第一个值。
• getAll(name): 获取指定参数的所有值。
• has(name): 检查查询字符串中是否存在指定的参数。
• set(name, value): 设置查询字符串中参数的值。

使用场景

URLSearchParams 特别适用于处理表单提交或构建 API 请求的查询字符串。它简化了查询参数的解析和构建过程。