使用 URLSearchParams 解析和管理URL query参数
创始人
2024-05-26 06:07:59
0

介绍

首先 URLSearchParams是一个构造函数,会生成一个URLSearchParams对象,参数类型: 不传 | string | object | URLSearchParams, 并且遇到特殊字符它会自动帮我们encode 和 decode

const urlSearch = new URLSearchParams();console.log("urlSearch", urlSearch); 
var paramsString = "a=1&a=2&b=%40&c=@"
var searchParams = new URLSearchParams(paramsString);//has 返回 [`Boolean`] 判断是否存在此搜索参数
searchParams.has("a") // true//get 获取指定搜索参数的第一个值,如果是编码过的会自动转码, 比如 b对应的值是 %40,会自动转为 @
searchParams.get('b') // @//getAll 获取指定搜索参数的所有值,返回是一个数组
searchParams.getAll('a') // ['1','2']
searchParams.getAll('b') // ['@']//append 插入一个指定的键/值对作为新的搜索参数。
searchParams.append("d", "3")
searchParams.get('d') // '3'//set 设置一个搜索参数的新值,假如原来有多个值将删除其他所有的值。
searchParams.getAll('a') // ['1','2']
searchParams.set('a', '5')
searchParams.getAll('a') // ['5']//delete 从搜索参数列表里删除指定的搜索参数及其对应的值。
searchParams.getAll('a') // ['1','2']
searchParams.delete('a')
searchParams.getAll('a') // []//toString 返回搜索参数组成的字符串,可直接使用在 URL 上, 如果值有特殊字符会自动encode, 比如c 对应的 @ 会自动encode 为 %40
searchParams.toString() // "a=1&a=2&b=%40&c=%40"//keys 返回一个iterator对象,此对象包含了键/值对的所有键名, 可以用for of 循环这个对象
for (const key of searchParams.keys()) { console.log(key); // 循环打印 'a' 'a' 'b' 'c'
}// values 和 entries 方法 同 keys 方法,都返回一个iterator对象, values会包含了键/值对的所有值, entries会包含了键/值对 

注意点

  • URLSearchParams 构造函数不会解析完整的URL,它会把 = 前面的当做key, = 后面当做value,如下会把’example.com/search?quer…’ 当做key,%40 当做value
const paramsString = 'http://example.com/search?query=%40';
const searchParams = new URLSearchParams(paramsString);searchParams.get('query') // null
searchParams.get('http://example.com/search?query') // @ 
  • 如果字符串起始位置有 ? 的话会被去除,所以字符串起始位置带不带 都可以
const paramsString1 = '?query=1';
const searchParams1 = new URLSearchParams(paramsString1);const paramsString2 = 'query=1';
const searchParams2 = new URLSearchParams(paramsString2);searchParams1.toString() // query=1
searchParams2.toString() // query=1 

实战

  • 当我们需要解析url 后面参数时,通过原型上面的方法就可以方便获取和操作
const paramsString = 'a=1&b=2'; 
// 或 const paramsString = '?a=1&b=2'; 
const searchParams = new URLSearchParams(paramsString);
searchParams.get('a') // '1' 
  • 当我们需要生成url 后面的参数时
const params = { a:1, b:2, c:'@'};
const urlSearchStr = new URLSearchParams(params).toString(); // a=1&b=2&c=%40 注意生成的字符串不带 ? 

其他

你如果使用react-router-dom v6版本的话,有一个 useSearchParamshook,也是基于URLSearchParams

最后

整理了75个JS高频面试题,并给出了答案和解析,基本上可以保证你能应付面试官关于JS的提问。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

相关内容

热门资讯

洪水 山火 枪击 抗议 这个“... 转自:千龙网7月4日是美国的“独立日”。得州自4日晚暴雨引发的洪灾死亡人数还在不断上升;已经蔓延3天...
山西首个大模型完成国家生成式人... 6月26日,山西数据流量谷入驻企业——山西凹凸时空智能科技有限公司自研的超脑工业垂类大模型完成国家生...
新加坡对花旗等九家银行开出 2... 新加坡金管局(MAS)宣布对包括瑞银(UBS)、花旗在内的九家金融机构处以共计 2,750 万新元(...
铁扇公主为什么看上牛魔王 铁扇公主为什么看上牛魔王为《西游记》中没有说明铁扇公主为什么看上牛魔王。铁扇公主,又叫罗刹女,中国古...
美国得州洪灾已致49人死亡 仍... 当地时间5日,据美国得克萨斯州地方政府应急和执法部门消息以及媒体报道,洪水当天继续肆虐得州中部地区,...
高标准市场体系建设步伐加快(奋... 来源:人民日报北京地铁早高峰,人流如潮。12号线安华桥站F口闸机旁一家面包店,生意忙碌。“地铁还在施...
幼儿园校服的意义和作用 幼儿园校服的意义和作用校服,可以把它理解成一种学校文化,既然是一个团队,集体,那么做文化建设就是必须...
山东舰航母编队香港开放活动已吸... 转自:央视网央视网消息 (新闻联播):在香港回归祖国28周年之际,中国人民解放军海军山东舰航母编队抵...
19岁女生遭侵害溺亡凶手死刑执... 转自:北京时间 【#19岁女生遭侵害溺亡凶手死刑执行#】...
江苏省出台提升政务服务管理质效... 近日,江苏省数据局、省发展改革委、省财政厅、省审计厅四部门联合印发《关于进一步提升政务服务管理质效的...