JavaScript简单获取url地址参数

系统管理员 2022-02-25 01:35 322阅读 0赞

##### JavaScript用URLSearchParams获取url地址参数 #####

我们页面之间传递数据很多时候都会用到url地址传参，一般都会用window.location获取地址
     对象，里面会有url信息，但是此方法比较麻烦
     然后我有一个好方法来分享给大家

JavaScript中的URLSearchParams对象 这是MDN上对于 [URLSearchParams][]的解释

// 模仿一个URL地址，相当于window.location
        var url = new URL("https://fortune?id=10&name=fortune-tao&num=111");
    
        // 这里只能用？开始后面的参数，不能加上地址(后面做解释)
        // new URLSearchParams(url地址参数)
        var searchParams = new URLSearchParams(url.search);

后面的案例就用以上url操作

**方法**

*  get方法  
    介绍：获取单个key的value。  
    使用方法：searchParams.get(“key”)  
    案例：`searchParams.get('id') //输出10`
 *  append方法  
    介绍： 插入一个指定的键/值对作为新的搜索参数。  
    使用方法：searchParams.append(key, value)  
    案例:  
    `searchParams.append('nickName' , '小fortune') searchParams.get('nickName') //输出小fortune`
 *  delete方法  
    介绍：删除一个key  
    使用方法：searchParams.delete(‘id’)  
    案例：

searchParams.delete('id')
      	 searchParams.get('id')                  //输出null

*  getAll方法  
    介绍：获取一个key的值，并以数组的形式返回  
    使用方法：searchParams.getAll(‘key名’)  
    案例：`searchParams.getAll('id') //输出["10"]`
 *  has方法  
    介绍：判断一个key是否存在  
    使用方法：searchParams.has(‘key名’)  
    案例：

searchParams.has('name')		//输出true
    	 searchParams.has('has')		//输出false

*  keys方法  
    介绍：返回一个对象，包含所有的key名  
    使用方法：searchParams.keys()  
    案例：

for (const key of searchParams.keys()) {
          	console.log(key)				//输出  id name num
          	}

*  values方法  
    介绍：返回一个对象，包含所有的value  
    使用方法：searchParams.values()  
    案例：

for (const key of searchParams.values()) {
          	console.log(key)				//输出 10 fortune-tao  111
     	   }

以上就是URLSearchParams对象的使用以及方法

**我们可以利用**get方法快速获取参数

更多方法请看[MDN][URLSearchParams]上的介绍

推荐[最全面的vue和微信小程序的区别][vue]

如果有问题的请**留言交流**  
说说你们的看法和一些更好地方法

[URLSearchParams]: https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
[vue]: https://blog.csdn.net/qq_40428678/article/details/88839518