（最全）详解 URLSearchParams

程序猿小野

已于 2023-11-10 18:27:34 修改

阅读量5.3k

点赞数 29

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

于 2023-11-02 15:24:01 首次发布

本文链接：https://blog.csdn.net/weixin_42289279/article/details/134157803

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

定义：URLSearchParams 是一个 JavaScript 内置类，用于处理 URL 查询字符串（query string）的解析和构建。

URL 查询字符串是 URL 中位于问号（?）后面的部分，用于传递参数和数值。例如，在以下 URL 中（https://example.com/page?name=John&age=30），查询字符串是 name=John&age=30

通常可以使用 window.location.search 来获取URL中的查询字符串。关于URL的组成和获取各个部分的方法详解可以参考我的另一篇博文：详解URL的组成以及获取URL各部分的方法-CSDN博客

我测试的初始URL是：http://127.0.0.1:5501/103001_URLSearchParams.html?name=jerry

  // 浏览器中的URL：http://127.0.0.1:5501/103001_URLSearchParams.html?name=jerry

  // 获取url中的查询字符串
  const searchStr = window.location.search;
  // URLSearchParams() 构造函数可以接受一个查询字符串作为参数，用于初始化 URLSearchParams 对象。
  const searchParams = new URLSearchParams(searchStr);
  console.log('searchParams', searchParams);

下面根据控制台的这张图来详细说说 URLSearchParams 原型上有哪些属性和方法：

1. size 属性

用于返回查询参数的数量。

const searchParams= new URLSearchParams('key1=value1&key2=value2&key3=value3');

console.log(searchParams.size); // 输出：3

注意：到2021年为止，URLSearchParams的size属性是在Chrome 89版本中加入的。不过需要注意的是，不同浏览器可能对URLSearchParams接口的支持程度不同，因此在实际使用时，建议检查目标浏览器的兼容性。

2. URLSearchParams.append(name, value)

向查询字符串中添加一个新的参数。可以append多个同名的，不会覆盖，会追加

// URLSearchParams.append(name, value)：向查询字符串中添加一个新的参数。可以append多个同名的，不会覆盖，会追加
  searchParams.append("gender", "male");
  searchParams.append("gender", "female");

3. URLSearchParams.`get(name) 入参name必传。这个方法应该是最常用的`

获取指定名称的参数值。如果存在多个同名参数，则返回第一个参数的值。

console.log(searchParams.get('gender')); // 字符串 'male' 如果有多个，默认返回第一个
console.log(searchParams.get('age'));    // get 一个不存在的，返回null

4. URLSearchParams.getAll`(name) 入参name必传`

获取指定名称的所有参数值，返回一个数组。

console.log(searchParams.getAll('gender')); // 数组  ['male', 'female']

5. URLSearchParams.has(name)

检查查询字符串中是否存在指定名称的参数。如果存在，则返回 true，否则返回 false。

console.log(searchParams.has('gender')); // 存在返回true
console.log(searchParams.has('age'));    // 不存在返回false

6. URLSearchParams.set(name, value)

设置指定名称的参数值。如果参数已存在，则会替换为新的值。

// URLSearchParams.set(name, value)：设置查询字符串中指定参数的值，如果参数不存在，则添加新的参数。
  searchParams.set('age', 18);
  console.log(searchParams.get('age')); // 18

7. URLSearchParams.delete(name)

// URLSearchParams.delete(name)：从查询字符串中删除指定的参数。
  searchParams.delete('age');
  console.log(searchParams.get('age')); // null  因为age被上一行删除了，所以返回null

8. URLSearchParams.toString()

将 URLSearchParams 对象转换为字符串表示形式，返回查询字符串。

// URLSearchParams.toString()：将 URLSearchParams 对象转换为字符串表示形式，返回查询字符串。
  console.log(searchParams.toString()); // name=jerry&gender=male&gender=female

9. URLSearchParams.sort()

按照参数名称对查询字符串中的参数进行排序。

// 按照参数名称对查询字符串中的参数进行排序。
  searchParams.sort();
  console.log(searchParams.toString()); // gender=male&gender=female&name=jerry

10. URLSearchParams.entries()

返回一个迭代器，该迭代器包含了所有查询参数的键值对。

// entries() 方法用于返回一个迭代器，该迭代器包含了所有查询参数的键值对。
  for (const [key, value] of searchParams.entries()) {
    console.log(key, value);
  }
  // gender male
  // gender female
  // name jerry

11. URLSearchParams.forEach()

遍历。回调第一个参数是value，第二个参数是key

searchParams.forEach((value, key)=>{
  console.log(key, value);
})
// gender male
// gender female
// name jerry

12. URLSearchParams.keys()

用于返回一个迭代器，该迭代器包含了所有查询参数的键。

// keys() 方法用于返回一个迭代器，该迭代器包含了所有查询参数的键。
for (const key of searchParams.keys()) {
  console.log(key);
}
// gender
// gender
// name

13. URLSearchParams.values()

用于返回一个迭代器，该迭代器包含了所有查询参数的值。

// values() 方法用于返回一个迭代器，该迭代器包含了所有查询参数的值。
  for (const value of searchParams.values()) {
    console.log(value);
  }
  // male
  // female
  // jerry

至此所有的属性和方法都写了，最后附上我测试的完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>测试URLSearchParams</h1>
  </body>
</html>

<script>
  // 浏览器中的URL：http://127.0.0.1:5501/103001_URLSearchParams.html?name=jerry

  // 获取url中的查询字符串
  const searchStr = window.location.search;
  // URLSearchParams() 构造函数可以接受一个查询字符串作为参数，用于初始化 URLSearchParams 对象。
  const searchParams = new URLSearchParams(searchStr);
  console.log("searchParams", searchParams);

  // URLSearchParams.append(name, value)：向查询字符串中添加一个新的参数。可以append多个同名的，不会覆盖，会追加
  searchParams.append("gender", "male");
  searchParams.append("gender", "female");

  console.log(searchParams.getAll("gender")); // 数组  ['male', 'female']
  console.log(searchParams.get("gender")); // 字符串 'male' 如果有多个，默认返回第一个
  console.log(searchParams.get("age")); // get 一个不存在的，返回null

  console.log(searchParams.has("gender")); // 存在返回true
  console.log(searchParams.has("age")); // 不存在返回false

  // URLSearchParams.set(name, value)：设置查询字符串中指定参数的值，如果参数不存在，则添加新的参数。
  searchParams.set("age", 18);
  console.log(searchParams.get("age")); // 18

  // URLSearchParams.delete(name)：从查询字符串中删除指定的参数。
  searchParams.delete("age");
  console.log(searchParams.get("age")); // null  因为age被上一行删除了，所以返回null

  // URLSearchParams.toString()：将 URLSearchParams 对象转换为字符串表示形式，返回查询字符串。
  console.log(searchParams.toString()); // name=jerry&gender=male&gender=female

  // 按照参数名称对查询字符串中的参数进行排序。
  searchParams.sort();
  console.log(searchParams.toString()); // gender=male&gender=female&name=jerry

  // entries() 方法用于返回一个迭代器，该迭代器包含了所有查询参数的键值对。
  for (const [key, value] of searchParams.entries()) {
    console.log(key, value);
  }
  // gender male
  // gender female
  // name jerry

  searchParams.forEach((value, key) => {
    console.log(key, value);
  });
  // gender male
  // gender female
  // name jerry

  console.log(searchParams.keys());

  // keys() 方法用于返回一个迭代器，该迭代器包含了所有查询参数的键。
  for (const key of searchParams.keys()) {
    console.log(key);
  }
  // gender
  // gender
  // name

  // values() 方法用于返回一个迭代器，该迭代器包含了所有查询参数的值。
  for (const value of searchParams.values()) {
    console.log(value);
  }
  // male
  // female
  // jerry

</script>

如果帮助到您了，可以留下一个赞👍告诉我

程序猿小野

关注

29
点赞
踩
34

收藏

觉得还不错? 一键收藏
打赏
1
评论
（最全）详解 URLSearchParams

是一个 JavaScript 内置类，用于处理（query string）的解析和构建。是 URL 中位于问号（?）后面的部分，用于传递参数和数值。例如，在以下 URL 中（https://example.com/page?name=John&age=30），查询字符串是通常可以使用 window.location.search 来获取URL中的查询字符串。我测试的初始URL是：http://127.0.0.1:5501/103001_URLSearchParams.html?name=jerry。
复制链接

扫一扫