URLSearchParams api简单解析url参数

先上代码

var url = new URL("https://www.baidu.com/s?wd=%E2%80%9C%E5%8D%B0%E5%BA%A6%E5%88%B6%E9%80%A0%E2%80%9D%E6%8C%91%E6%88%98%E2%80%9C%E4%B8%AD%E5%9B%BD%E5%88%B6%E9%80%A0%E2%80%9D%EF%BC%9F&rsv_idx=2&tn=baiduhome_pg&ie=utf-8&rsv_pq=a030fb450001560a&oq=URLSearchParams&rsv_t=ffef3M86%2BydHr8QY4E1XqDq8ehTgIeB45QYM7a10slr%2FI5okYJlF8yryJ2KE2TLcbPs6&rqid=a030fb450001560a&rsf=b387b176e09280bbdef0d2f1a2c0e56e_1_15_11&rsv_dl=0_right_fyb_pchot_20811&sa=0_right_fyb_pchot_20811");

var searchParams3 = new URLSearchParams(url.search);

for(var pair of searchParams3.entries()) {
    console.log('=================');
    console.log(pair[0]+ ', '+ pair[1]);
}

输出结果

---

URLSearchParams

• URLSearchParams.append(),插入一个指定的键/值对作为新的搜索参数。
• URLSearchParams.delete(),从搜索参数列表里删除指定的搜索参数及其对应的值。
• URLSearchParams.entries(),返回一个iterator可以遍历所有键/值对的对象。
• URLSearchParams.get(),获取指定搜索参数的第一个值。
• URLSearchParams.getAll(),获取指定搜索参数的所有值，返回是一个数组。
• URLSearchParams.has(),返回 Boolean 判断是否存在此搜索参数。
• URLSearchParams.keys(),返回iterator 此对象包含了键/值对的所有键名。
• URLSearchParams.set(),设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。
• URLSearchParams.sort(),按键名排序。
• URLSearchParams.toString(),回搜索参数组成的字符串，可直接使用在 URL 上。
• URLSearchParams.values(),返回iterator 此对象包含了键/值对的所有值。

---

两个问题

1. entries，keys,values方法返回的是遍历器，不是数组
2. URLSearchParams 不会解析完整 URL，但是如果字符串起始位置有 ? 的话会被去除。他是解析url查询字符串的

看代码

var paramsString1 = "http://example.com/search?query=%40";
var searchParams1 = new URLSearchParams(paramsString1);

searchParams1.has("query"); // false
searchParams1.has("http://example.com/search?query"); // true

searchParams1.get("query"); // null
searchParams1.get("http://example.com/search?query"); // "@" (equivalent to decodeURIComponent('%40'))

var paramsString2 = "?query=value";
var searchParams2 = new URLSearchParams(paramsString2);
searchParams2.has("query"); // true

var url = new URL("http://example.com/search?query=%40");
var searchParams3 = new URLSearchParams(url.search);
searchParams3.has("query") // true

如上，"http://example.com/search?query"会被当做键值对的一个key来解析

示例来源MDN