在现代 Web 开发中，处理 URL 参数是一项常见的任务。为了帮助开发人员更方便地操作 URL 参数，JavaScript 提供了 URLSearchParams 对象。本文将深入探讨该对象的用法，以及在 ECMAScript 2017 中的新功能。
URLSearchParams 对象基础
URLSearchParams 对象表示一个 URL 的查询参数部分。可以使用它来解析、操作和构建 URL 查询字符串。
创建 URLSearchParams 对象
我们可以通过多种方式创建 URLSearchParams 对象。
const params1 = new URLSearchParams(window.location.search); // 从当前 URL 中获取查询参数
const params2 = new URLSearchParams('foo=bar&baz=qux'); // 从字符串中解析出查询参数
const params3 = new URLSearchParams([['foo', 'bar'], ['baz', 'qux']]); // 从键值对数组中创建查询参数例如，假设我们有以下 URL：https://www.example.com/search?q=javascript&page=2，则可以通过以下代码获取查询参数：
const query_params = new URLSearchParams(window.location.search);
console.log(query_params.get('q')); // "javascript"
console.log(query_params.get('page')); // "2"其中，get 方法用于获取指定的查询参数值。
操作 URLSearchParams 对象
URLSearchParams 对象还提供了其他几个常用方法。
append(name, value)：添加一个新的查询参数。如果已存在同名的查询参数，则会将其值添加到该参数后面，使用&连接。set(name, value)：设置一个查询参数的值，如果已存在同名的查询参数，则会将其值覆盖为新值。delete(name)：删除指定的查询参数。toString()：返回表示当前 URLSearchParams 对象的查询字符串。
例如，我们想要在当前 URL 上添加一个新的查询参数 key=value：
const query_params = new URLSearchParams(window.location.search);
query_params.append('key', 'value');
window.location.search = query_params.toString(); // 跳转到包含新查询参数的 URL迭代 URLSearchParams 对象
URLSearchParams 对象还支持迭代器功能，可以用于对所有查询参数进行遍历。
const query_params = new URLSearchParams(window.location.search);
for (const [name, value] of query_params) {
console.log(`${name}: ${value}`);
}ES8 中的 URLSearchParams 对象改进
在 ECMAScript 2017（ES8）中，URLSearchParams 对象增加了一些新功能，使其更方便和高效地操作查询参数。
forEach 方法
在 ES8 中，URLSearchParams 对象新增了 forEach 方法，可以用于对所有查询参数进行遍历。
const query_params = new URLSearchParams(window.location.search);
query_params.forEach((value, name, searchParams) => {
console.log(`${name}: ${value}`);
});其中，回调函数的第一个参数是当前查询参数的值，第二个参数是当前查询参数的名称，第三个参数是 URLSearchParams 对象本身。
sort 方法
在 ES8 中，URLSearchParams 对象还新增了 sort 方法，可以对查询参数进行排序。这对于构建一个一致的查询字符串非常有用。
const query_params = new URLSearchParams(window.location.search); const sorted_params = new URLSearchParams([...query_params].sort()); window.location.search = sorted_params.toString(); // 跳转到按字母顺序排列的查询字符串 URL
其中，通过扩展运算符将 URLSearchParams 对象转换为键值对数组，然后使用数组的 sort 方法进行排序。
总结
URLSearchParams 对象是 JavaScript 的一个强大工具，在处理 URL 参数方面非常有用。无论你想解析、操作、构建 URL 查询字符串，或者遍历、排序查询参数，URLSearchParams 都是一个不错的
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651acd1f95b1f8cacd29c5fd