URLSearchParams完全指南：URL查询参数处理利器

URLSearchParams完全指南：URL查询参数处理利器

引用

CSDN

1.

https://blog.csdn.net/cnzzs/article/details/146246967

URLSearchParams是ECMAScript 2015（ES6）引入的一个内置构造函数，专门用于处理URL中的查询字符串。它提供了一系列方法，可以轻松地解析、访问、修改和生成查询参数，极大地简化了前端开发中处理URL参数的复杂度。本文将详细介绍URLSearchParams的功能和使用方法，帮助开发者更好地掌握这一实用工具。

什么是 URLSearchParams？

URLSearchParams是ECMAScript 2015（ES6）中引入的一个内置构造函数，专门用来处理URL中的查询字符串。简单来说，它是用来解析和操作?后面的那部分内容的。想象一下，如果你需要从
https://example.com/?name=张三&age=30
中提取出name和age的值，以前可能需要手动写代码去解析，但现在有了URLSearchParams，一切都变得轻松多了。

URLSearchParams 的作用

它的主要功能就是帮我们搞定URL中那些查询参数（就是?后面那一串东西）。它不仅能把这些参数解析成一堆键值对，还能让我们轻松地访问、修改、添加甚至删除这些参数。听起来是不是很方便？下面咱们具体来看看它都能干点啥：

1. 解析查询参数：你把一个像?name=张三&age=30这样的查询字符串扔给URLSearchParams，它就能自动把它解析成一个对象，然后你就可以像操作字典一样轻松地访问这些参数了。而且它还贴心地帮你处理了编码和解码的问题，完全不用你操心。
2. 访问查询参数：通过它提供的方法，你可以轻松地获取某个参数的值。比如，你想拿到name的值，直接调用get('name')就行了。如果你想一次性获取所有参数，它还能给你返回一个迭代器，让你灵活地遍历这些键值对。
3. 添加和修改查询参数：如果你想动态地往URL里加点新参数，或者修改已有的参数，URLSearchParams也完全不在话下。它提供了append()、set()和delete()这些方法，让你轻松地添加、修改或删除参数。比如你想把age改成35？简单，set('age', 35)就搞定了！
4. 生成查询字符串：最后，如果你想把修改后的参数重新变成一个查询字符串，URLSearchParams也能帮你搞定。调用toString()方法，它就会把你当前的参数对象转换成标准的URL查询字符串，直接用到你的URL里，或者发请求的时候带上，简直是方便到飞起！

URLSearchParams 对象

URLSearchParams其实是一个JavaScript内置的构造函数，也就是说，它不是一个可以直接用的方法，而是需要我们通过new关键字来创建一个实例对象。

URLSearchParams的实例化的参数也非常灵活，它可以直接接收一个查询字符串、一个键值对数组，甚至是一个对象。下面我们来通过几个具体的代码示例，看看如何用不同的方式创建URLSearchParams对象，并解析其中的参数。

3.1 解析字符串

最常见的场景是直接从URL中的查询字符串实例化URLSearchParams。比如，我们有一个URL：
https://example.com/?name=张三&age=30，我们可以这样解析：

3.2 解析键值对数组

有时候，我们可能已经有一个键值对数组，比如[['name', '张三'], ['age', '30']]，我们也可以直接用它来实例化URLSearchParams：

3.3 解析键值对

URLSearchParams也可以通过普通对象创建实例化，解析对象参数：

3.4 处理重复参数

有时候，URL中可能会包含重复的参数，比如?name=张三&name=李四，这时URLSearchParams也能很好地处理：

3.5 处理特殊字符

URLSearchParams还会自动处理URL中的特殊字符，比如空格会被转换成+，中文字符会被编码：

通过以上代码示例，我们可以看到，URLSearchParams的实例化方式非常灵活，无论是从查询字符串、键值对数组、对象。它都能轻松应对。而且，它还支持处理重复参数和特殊字符，完全不用我们手动去折腾！

接下来，我们通过一些代码示例，来看看URLSearchParams的常用方法和属性。

URLSearchParams 的常用方法和属性

4.1 获取参数 get() 和 getAll()

get()用来获取指定参数的值，如果参数有多个值，只返回第一个。getAll()则返回所有值的数组。

4.2 添加和修改参数 append() 和 set()

append()用来添加一个新的参数值，即使参数已经存在，也不会覆盖。

set()用来设置参数值，如果参数已存在，会覆盖旧值；如果不存在，会自动添加。

4.3 删除参数 delete()

delete()用来删除指定的参数。

4.4 遍历参数：forEach() 和 entries()

有时候我们需要遍历所有参数，forEach()和entries()就能派上用场啦！

forEach()可以遍历所有参数，支持回调函数。

entries()返回一个迭代器，可以用for...of遍历。

keys()返回一个获取key值的迭代器

values()返回一个获取value值的迭代器

4.5 判断参数是否存在：has()

has()用来判断某个参数是否存在。

4.6 转换成字符串：toString()

toString()将URLSearchParams对象转换成查询字符串。

4.7 属性：size

size属性是用于返回查询参数的数量。

实际开发场景: URLSearchParams 与 URL 配合

在实际开发场景中，你是需要解析一个完整的URL中的参数部分。比如一个像这样的URL：
https://example.com/?name=张三&age=30。
你可能会想：“怎么才能优雅地把?name=张三&age=30这部分提取出来，然后操作它呢？”

别担心！JavaScript给我们提供了一个强大的组合技：URL对象+URLSearchParams。用它们，我们可以轻松地从完整的URL中提取查询字符串，然后进行各种酷炫操作。下面来看看怎么玩！

首先，我们可以用URL对象来解析完整的URL，然后通过它的search属性拿到查询字符串部分。

有了查询字符串，我们就可以用URLSearchParams来处理它啦！直接传queryString给它就行

如果觉得多写一步麻烦，其实URL对象还提供了一个更优雅的方式，直接用url.searchParams就能拿到URLSearchParams实例对象！

总结

URLSearchParams是JavaScript中处理URL查询参数的利器，它简化了解析和操作查询字符串的复杂度。通过它，我们可以轻松地获取、添加、修改或删除参数，甚至还能处理重复参数和特殊字符。结合URL对象，它更是强大到飞起。无论你是处理简单的查询字符串，还是需要动态生成复杂的URL，URLSearchParams都能搞定！