优雅的处理url参数

319 阅读2分钟

原给自定的小目标是每周一两个总结吧,结果这转眼就个把月了都没有更新,唉,没办法,搬砖小菜鸡,亚历山大,好了,言归正传,这里介绍下一个url的searchParams类,很好用;

关于浏览器url地址:
例:www.jd.com:8080?id=9#/home;
结构:
1.http 属协议;
2.www.jd.com 属域名;
3.8080 属端口;
4.id 属参数;
5.home 属hash值;

关于具体的什么是协议,什么是域名,什么是hash值......这里就不缀叙了,不懂得同学可以自行查阅资料,因为这里面随便一个拆分出来都可以长篇大论;

这里我主要介绍URL.searchParams;
URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。
具体使用很简单:
首先我们要通过URL这个类new一个url出来;
const url = new URL('www.jd.com');
此时得url这个对象身上已经带有searchParams类了;

searchParams提供得方法:

1.append() 追加参数; 接收两个参数,其第一个参数是键,第二个参数是值;

例:url.searchParams.append('name','bob');
此时我们得url就在name的参数上追加一个值为bob;如果没有对应的参数,则会新增此参数;

2.delete() 删除参数; 接收一个参数,是需要删除得参数名;

例:url.searchParams.delete('name');
此时我们得name参数就被删除了;

3.get() 获取指定搜索参数的第一个值; 也是接收一个参数,也是接受参数名;

例:url.searchParams.get('name');
此时会获取到name的第一个值;

4.getAll() 获取指定搜索参数的所有值,返回是一个数组

例:url.searchParams.getAll('name');
此时会获取到name的所有值,并且返回一个数组;

5.set() 设置一个搜索参数的新值,如过没有此参数,则追此参数到末尾;

例:url.searchParams.set('age','10');
此时url上会多一个age参数,值为10;

5.entries() 方法返回一个iterator,允许遍历该对象中包含的所有键/值对。

例:url.searchParams.entries();
此时返回一个可遍历的所有参数组成的对象;

6.has() 判断是否存在此搜索参数,返回 Boolean ;

例:url.searchParams.has('blili');
此时返回值为false,因为参数上并没有blili参数;

7.sort() 按键名排序,没有返回值;

const url = new URL('www.jd.com?c=4&a=2&b=3&a=1');
url.searchParams.sort()
此时url为www.jd.com?a=2&a=1&b=3&c=4

8.toString() 返回搜索参数组成的字符串

const url = new URL('www.jd.com?c=4&a=2&b=3&a=1');
const params = url.searchParams.toString()
此时params为'c=4&a=2&b=3&a=1'

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

例:url.searchParams.values();
此时返回一个可遍历的所有参数组成的对象;

由于这个方法太新了,导致对很多老旧的浏览器兼容性不是很友好,如果需要使用,请注意兼容性;