在浏览器和 Node.js 中，我们都经常需要处理 URL 查询字符串。而在 ECMAScript 2017 中，新增了一个针对 URL 查询字符串的对象，即 URLSearchParams。本文将详细介绍 URLSearchParams 的使用方法，包括查询、添加、删除、替换等操作，并且附带详细的示例代码。
基本用法
使用 URLSearchParams 可以很方便地处理 URL 查询字符串，无需手动解析字符串。我们可以按照如下方式创建一个 URLSearchParams 对象：
const query = new URLSearchParams('?foo=bar&baz=qux');在创建时，我们可以将初始查询字符串作为参数传入，也可以传入一个空字符串或者不传任何参数。接着，我们就可以使用诸如 get()、set()、has() 等方法来操作查询参数了。
下面是一些常见的操作：
console.log(query.get('foo')); // bar
query.set('foo', 'hello');
console.log(query.toString()); // ?foo=hello&baz=qux
console.log(query.has('foo')); // true
query.delete('foo');
console.log(query.toString()); // ?baz=qux其中，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 解析对象中获取查询参数：
const url = new URL('https://example.com/?foo=bar&baz=qux#anchor');
const query = url.searchParams;
console.log(query.toString()); // ?foo=bar&baz=qux这里我们使用 URL 对象解析 URL，然后获取查询参数对象。使用 query.toString() 输出查询字符串。
总结
通过使用 URLSearchParams，我们可以很方便地操作 URL 查询参数，避免了手动解析字符串的复杂和繁琐。通过本文的介绍和示例代码，相信已经掌握了 URLSearchParams 的基本用法和一些常见操作。同时，我们还介绍了如何迭代多个查询参数以及如何从一个 URL 对象中解析查询参数。在实际开发中，我们需要灵活运用 URLSearchParams，为我们的开发提供更加便利的操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6763c48841e9894315b42