【JS URLSearchParams】再也不用手动处理query了

欢迎大家来到IT世界,在知识的湖畔探索吧!

在业务开发中，我们经常会遇见处理url上query参数的场景，要么是查询query上是否有某个属性，要么就是将query进行string处理。js元素api中URLSearchParams可以很方便我们处理这些场景，代码如下

• 获取当前页面路由的query参数

//获取当前页面地址 // https://www.xxx.org.cn?id=1&tag=2 //URLSearchParams不会解析完整的url路径， //？后面的字符会被去除，在使用的时候需要截取?后面的字符串 const url = window.location.href.split('?')[1] //实例化url const searchParams = new URLSearchParams(url); //获取id参数 console.log('id',searchParams.get('id')) // 1 //获取tag参数 console.log('tag',searchParams.get('tag')) //2 //查询是否存在uid参数 console.log('uid',searchParams.has('uid')) //false 

欢迎大家来到IT世界,在知识的湖畔探索吧!

欢迎大家来到IT世界,在知识的湖畔探索吧!

• 将对象转query

欢迎大家来到IT世界,在知识的湖畔探索吧!//对象转query这场景比较常见 const params = { id:111, tag:1, uid: } const searchParams = new URLSearchParams(params); console.log('string--1',searchParams.toString()); //id=111&tag=1&uid= //修改参数id searchParams.set('id',222) console.log('string--2',searchParams.toString()); //id=222&tag=1&uid= //新增参数t searchParams.append('t',Date.now()) console.log('string--3',searchParams.toString()); // id=222&tag=1&uid=&t=13 //删除参数t searchParams.delete('t') console.log('string--4',searchParams.toString()); //id=222&tag=1&uid= //查询有参数key console.log('keys----',[...searchParams.keys()]) //  ['id', 'tag', 'uid']

ps：实例searchParams几个比较常用的方法

• get() 获取参数值
• set() 重新设置参数值
• toString() 序列化实例
• keys() 获取参数keys
• values() 获取每个key的value
• append() 插入一个参数
• delete() 删除参数key