URLSearchParams生成和解析URL或者参数字符串

Posted minorf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了URLSearchParams生成和解析URL或者参数字符串相关的知识,希望对你有一定的参考价值。

  开发项目的过程中,可能需要解析和生成相应的URL,使用URLSearchParams可以更快的去生成或者解析。

一、添加URLSearchParams

  首先需要npm install个url-search-params-polyfill

  npm install url-search-params-polyfill --save

  添加完成之后,将其引入到项目中。

 import ‘url-search-params-polyfill‘;

二、使用URLSearchParams

  1、设置参数set

  set的格式为set(参数名,值),设置参数字符串以及URL代码如下

  let search = new URLSearchParams()
  search.set(‘test‘, ‘测试set‘)
  search.set(‘type‘, ‘1‘)
  let searchUrl = new URLSearchParams(window.location.href)
  searchUrl.set(‘urlTest‘, ‘测试set‘)
  searchUrl.set(‘urlType‘, ‘2‘)
  console.log(‘输出结果:‘, search.toString())               //输出结果: test=%E6%B5%8B%E8%AF%95set&type=1
  console.log(‘URL输出结果:‘, searchUrl.toString())     //URL输出结果: http%3A%2F%2Flocalhost%3A3000%2F=&urlTest=%E6%B5%8B%E8%AF%95set&urlType=2

  2、获取参数值get

  get的格式为get(参数名),代码如下

 console.log(search.get(‘test‘))             //输出结果:测试set
 console.log(searchUrl.get(‘urlType‘))    //URL输出结果:2  

  3、判断是否存在某参数has

  has的格式为has(参数名),返回的是boolean类型,代码如下

 console.log(search.has(‘type‘))    //输出结果:true
 console.log(searchUrl.has(‘test‘))  //URL输出结果:false

  4、appendgetAll

  在开发过程中,可能需要使用url传递一个数组参数,比如http://localhost:3000/?arr=[1,2,3],但是在推荐的形式是:http://localhost:3000/?arr=1&&arr=2&&arr=3,这种情况就可以使用append来添加相同的参数,使用getAll来获取这个参数,获取后自动转化为数组类型。

  append的格式为append(参数名,值),getAll的格式为getAll(参数名),具体代码如下

search.append(‘type‘, ‘10‘)
searchUrl.append(‘urlType‘, ‘20‘)
console.log(search.getAll(‘type‘))          //输出结果:["1", "10"]
console.log(searchUrl.getAll(‘urlType‘))       //URL输出结果:["2", "20"]

   常用的大概就是这几个,还有delete,sort,foreach,keys,values,for of等,具体的可以参考一下原文https://www.npmjs.com/package/url-search-params-polyfill

  

以上是关于URLSearchParams生成和解析URL或者参数字符串的主要内容,如果未能解决你的问题,请参考以下文章

URLSearchParams接口用来处理浏览器的url

URL 参数解析

URLSearchParams 接口定义处理 URL 参数串

react-router拿到url传的值(用到URLSearchParams)

URLSearchParams对象

命名URL和URL反向解析