zoukankan      html  css  js  c++  java
  • 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

      

  • 相关阅读:
    SQL数据转移
    怎么将控制台的打印输出到文本文件中
    用来控制 XML 序列化的属性
    excel内容转成xml
    HTTP状态码
    char、varchar、nchar、nvarchar的区别
    C# Cookie编程
    android的原理--为什么我们不需要手动关闭程序
    HTTP协议及HTTP包
    HTTP 方法:GET 对比 POST
  • 原文地址:https://www.cnblogs.com/minorf/p/12922779.html
Copyright © 2011-2022 走看看