URLSearchParams

URLSearchParams 是一个内置的 JavaScript 对象，用于处理 URL 的查询字符串（即 URL 中 ? 后面的部分）。它提供了一系列方法来解析、修改和生成查询字符串。URLSearchParams 在现代浏览器中广泛支持，并且在 Node.js 中也可以通过一些 polyfill 库来使用。

基本用法

创建 URLSearchParams 对象

你可以通过以下几种方式创建 URLSearchParams 对象：

1、从 URL 字符串创建

const params = new URLSearchParams('key1=value1&key2=value2');

2、从对象创建

const params = new URLSearchParams({
  key1: 'value1',
  key2: 'value2'
});

3、从数组创建

const params = new URLSearchParams([
  ['key1', 'value1'],
  ['key2', 'value2']
]);

4、从现有的 URL 对象创建

const url = new URL('https://example.com/?key1=value1&key2=value2');
const params = new URLSearchParams(url.search.slice(1));

方法

URLSearchParams 提供了多种方法来操作查询参数：

• append(name, value)：添加一个新的键值对。

  params.append('key3', 'value3');

• delete(name)：删除指定名称的所有键值对。

  params.delete('key2');

• get(name)：获取指定名称的第一个值。

  const value = params.get('key1'); // 'value1'

• getAll(name)：获取指定名称的所有值。

  params.append('key1', 'anotherValue1');
  const values = params.getAll('key1'); // ['value1', 'anotherValue1']

• has(name)：检查是否存在指定名称的键值对。

  const hasKey = params.has('key1'); // true

• set(name, value)：设置指定名称的值，如果存在则替换，否则添加。

  params.set('key1', 'newValue1');

• toString()：将查询参数转换为字符串。

  const queryString = params.toString(); // 'key1=newValue1&key3=value3'

• entries()：返回一个迭代器，包含所有键值对。

  for (const [key, value] of params.entries()) {
    console.log(`${key}: ${value}`);
  }

• keys()：返回一个迭代器，包含所有键名。

  for (const key of params.keys()) {
    console.log(key);
  }

• values()：返回一个迭代器，包含所有值。

  for (const value of params.values()) {
    console.log(value);
  }

• forEach(callbackFn, thisArg?)：遍历所有键值对。

  params.forEach((value, key) => {
    console.log(`${key}: ${value}`);
  });

示例

以下是一个完整的示例，展示了如何使用 URLSearchParams 来处理查询字符串：

// 从 URL 字符串创建 URLSearchParams 对象
const url = new URL('https://example.com/?key1=value1&key2=value2');
const params = new URLSearchParams(url.search.slice(1));

// 添加新的键值对
params.append('key3', 'value3');

// 删除指定名称的键值对
params.delete('key2');

// 获取指定名称的第一个值
const value1 = params.get('key1'); // 'value1'

// 获取指定名称的所有值
params.append('key1', 'anotherValue1');
const values1 = params.getAll('key1'); // ['value1', 'anotherValue1']

// 检查是否存在指定名称的键值对
const hasKey1 = params.has('key1'); // true

// 设置指定名称的值
params.set('key1', 'newValue1');

// 将查询参数转换为字符串
const queryString = params.toString(); // 'key1=newValue1&key3=value3'

// 遍历所有键值对
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// 使用 entries() 迭代器
for (const [key, value] of params.entries()) {
  console.log(`${key}: ${value}`);
}

// 使用 keys() 和 values() 迭代器
for (const key of params.keys()) {
  console.log(key);
}
for (const value of params.values()) {
  console.log(value);
}

浏览器兼容性

URLSearchParams 在现代浏览器中得到了广泛支持，但在一些旧版本的浏览器中可能不被支持。如果你需要在这些浏览器中使用 URLSearchParams，可以考虑使用 polyfill 库，例如 url-search-params-polyfill。

总结

URLSearchParams 是一个非常方便的对象，用于处理 URL 查询字符串。通过它的各种方法，你可以轻松地解析、修改和生成查询字符串。