URL和URLSearchParams 的使用

30 min read

URL和URLSearchParams是Javascript中用于操作URL的两个内置对象。

URL对象用于解析和操作URL，其构造函数如下：

new URL(url[, base])

其中，url为要解析的URL字符串，base为可选参数，指定基础URL以处理相对URL。URL对象提供了一系列方法和属性，常用的有：

  • href: 返回URL的完整字符串
  • protocol: 返回URL的协议部分（比如http://）
  • host: 返回URL的主机部分（比如www.example.com）
  • pathname: 返回URL的路径部分（比如/example）
  • search: 返回URL的查询参数部分（比如?key1=value1&key2=value2）
  • hash: 返回URL的哈希部分（比如#section1）

URLSearchParams对象用于解析和操作URL的查询参数，其构造函数如下：

new URLSearchParams(init)

其中，init为可选参数，可以是一个URLSearchParams对象、为URL查询字符串或包含查询字符串的任何对象。URLSearchParams对象提供了一系列方法和属性，常用的有：

  • append(name, value): 在查询参数中添加一个新的键值对
  • delete(name): 删除指定键的所有值
  • get(name): 获取指定键的第一个值
  • getAll(name): 获取指定键的所有值的数组
  • has(name): 判断是否存在指定键
  • set(name, value): 设置指定键的值，如果已存在则覆盖，否则添加新值
  • toString(): 返回查询参数的序列化字符串

使用示例：

// 使用URL对象解析URL
const url = new URL('https://www.example.com/example?key1=value1&key2=value2');
console.log(url.protocol); // 输出：https:
console.log(url.host); // 输出：www.example.com
console.log(url.pathname); // 输出：/example
console.log(url.search); // 输出：?key1=value1&key2=value2

// 使用URLSearchParams对象解析查询参数
const params = new URLSearchParams(url.search);
console.log(params.get('key1')); // 输出：value1
console.log(params.getAll('key2')); // 输出：['value2']

// 修改查询参数
params.delete('key1');
params.set('key3', 'value3');
console.log(params.toString()); // 输出：'key2=value2&key3=value3'

// 更新URL的查询参数
url.search = params.toString();
console.log(url.href); // 输出：'https://www.example.com/example?key2=value2&key3=value3'

通过URL对象和URLSearchParams对象，我们可以方便地解析和操作URL的各个部分和查询参数。