JavaScript简单获取url地址参数

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上的介绍

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

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