URLSearchParams 解析 URL 携带参数

Experimental:  这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变

示例

假设项目地址是 http://127.0.0.1::5500?name=张三&sex=男&name=李四

方法：

1.toString()：返回搜索参数组成的字符串，可以直接使用在URL上

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.toString()
返回: 'name=张三&sex=男&name=李四'

2.append()：插入一个指定的键值对作文新的搜索参数

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.append("age",18)
URLSearch.toString()
返回: 'name=张三&sex=男&name=李四&age=18'

3.delete()：从搜索参数列表里删除指定的所有搜索参数及其对应的值

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.delete("name")
URLSearch.toString()
返回: 'sex=男'

4.entries()：返回一个 iterator 可以遍历所有的键值对的对象

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
let entries=URLSearch.entries()
for(let [key,val] of entries){
    console.log(key,val)
}
返回:   name 张三
        sex 男
        name 李四

5.get()：获取指定搜索参数的第一个值

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.get("name")
返回: '张三'

6.getAll()：获取指定搜索参数的所有值，组成一个数组

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.getAll('name')

返回:  ['张三', '李四']

7.has()：返回Boolean值，判断是否存在次搜索参数

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.has('name')

返回:  true

8.keys()：返回 iterator 此对象包含了键值对的所有键名

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
let keys=URLSearch.keys()
for(let key of keys){
    console.log(key)
}
返回: name
      sex
      name
      

9.set()：设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值

场景一：没有相同的参数

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.set('height',180)
URLSearch.toString()
返回：'name=张三&sex=男&name=李四&height=180'

场景二：有相同的参数

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.set('name',"王五")
URLSearch.toString()
返回：'name=王五&sex=男'

10.sort()：按键名排序

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
URLSearch.sort()
URLSearch.toString()

返回：'name=张三&name=李四&sex=男'

11.values()：返回 iterator 此对象包含了键值对的所有值

let searchTxt=window.location.search;
let URLSearch=new URLSearchParams(searchTxt);
let values=URLSearch.values();
for(let val of values){
    console.log("val",val)
}
返回：   val 张三
        val 男
        val 李四