使用 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的提问。



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

相关内容

热门资讯

我想寻求一部关于恐龙的电视剧的... 我想寻求一部关于恐龙的电视剧的名字恐龙特急克赛号是不是呢?..《大雄与恐龙》...............
在《西游记》原著里,刘伯钦到了... 在《西游记》原著里,刘伯钦到了两界山就不能送唐僧了,原因是什么?因为再往前的环境就比较危险的,对于他...
以前有一首配乐散文朗诵,现在找... 以前有一首配乐散文朗诵,现在找不到啦,请大家帮忙名字叫<<你是我一生一世的牵挂>>(注明一点,不是歌...
飞蛾的梦的专辑背景 飞蛾的梦的专辑背景 正规一辑《飞蛾的梦》为李升基的出道专辑,于2004年6月25日在韩国发行 。李升...
上大学迁户口好还是不迁好呢?农... 上大学迁户口好还是不迁好呢?农村户口迁不迁呢?上大学是否迁户口,可以根据自己的情况灵活掌握。但是现在...
家长举报学校暑假违规补课,教体... 封面新闻记者 苏定伟60元/天!四川南充一名家长网上举报学校暑假违规补课。7月5日,封面新闻记者从当...
亚材门窗运营主体变更,新征程开...   近日,广东亚材静音幕墙门窗有限公司通过官方渠道发表声明,就“亚材门窗”品牌运营主体变更事宜作出正...
西安市第六中学教育集团面向社会... 教师招聘公告西安市第六中学西安市第六中学教育集团期待您的加入!期待与您共赴一场最美的约定!学校简介西...
狗狗冲向小孩主人飞扑制止暴揍教... 【#狗狗冲向小孩主人飞扑制止暴揍教育#】近日,湖南韶山。自家狗狗突然扑向路边小孩,主人箭步上前制止,...
我梦见自己结婚了,在此说破,希... 我梦见自己结婚了,在此说破,希望自己和家人身体健康,平安快乐,幸福永远,大吉大利?梦都是假的,不要想...