首页 技术设计 前端 js

​ 本文介绍了内置的 URLSearchParams 类，用于处理 URL 查询字符串，包括其属性如 size、append、get、getAll 等方法的详细说明和示例，以及如何使用这些方法操作和转换查询字符串。

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

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

// 浏览器中的 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
至此所有的属性和方法都写了，最后附上我测试的完整代码：
# 测试 URLSearchParams
// 浏览器中的 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