在浏览器和 Node.js 中，我们都经常需要处理 URL 查询字符串。而在 ECMAScript 2017 中，新增了一个针对 URL 查询字符串的对象，即 URLSearchParams。本文将详细介绍 URLSearchParams 的使用方法，包括查询、添加、删除、替换等操作，并且附带详细的示例代码。
基本用法
使用 URLSearchParams 可以很方便地处理 URL 查询字符串，无需手动解析字符串。我们可以按照如下方式创建一个 URLSearchParams 对象：
----- ----- - --- ------------------------------------
在创建时，我们可以将初始查询字符串作为参数传入，也可以传入一个空字符串或者不传任何参数。接着，我们就可以使用诸如 get()、set()、has() 等方法来操作查询参数了。
下面是一些常见的操作：
------------------------------ -- --- ---------------- --------- ------------------------------ -- ------------------ ------------------------------ -- ---- -------------------- ------------------------------ -- --------
其中，query.get('foo') 的作用是获取查询参数 foo 的值，输出为 bar。query.set('foo', 'hello') 将查询参数 foo 的值修改为 hello。query.toString() 返回修改后的查询字符串。query.has('foo') 判断查询参数 foo 是否已经存在，输出为 true。query.delete('foo') 则删除了查询参数 foo。以上操作都是针对一个查询参数的操作。如果有多个查询参数需要操作，需要进行循环遍历。
迭代操作
针对多个查询参数，我们可以使用 entries()、keys()、values() 等方法进行遍历操作。
--------------------- ---------- --------------------- ---------- ----------------------------------- -- ---------- --------- --- ---- ----- ------ -- ---------------- - ------------------------------- - -- ------- -- ------------ -- ------------
query.append('array', 'value1') 和 query.append('array', 'value2') 分别将查询参数 array 的值添加为 value1 和 value2，query.getAll('array') 返回查询参数 array 的所有值。query.entries() 返回一个迭代器，可迭代每个查询参数的键值对。循环遍历输出每个键值对。
解析操作
我们还可以从一个 URL 解析对象中获取查询参数：
----- --- - --- --------------------------------------------------- ----- ----- - ----------------- ------------------------------ -- ----------------
这里我们使用 URL 对象解析 URL，然后获取查询参数对象。使用 query.toString() 输出查询字符串。
总结
通过使用 URLSearchParams，我们可以很方便地操作 URL 查询参数，避免了手动解析字符串的复杂和繁琐。通过本文的介绍和示例代码，相信已经掌握了 URLSearchParams 的基本用法和一些常见操作。同时，我们还介绍了如何迭代多个查询参数以及如何从一个 URL 对象中解析查询参数。在实际开发中，我们需要灵活运用 URLSearchParams，为我们的开发提供更加便利的操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a6763c48841e9894315b42