获取当前页面url参数的三种方法

知识先填坑：

location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号(包含？)?之后的部分）

假设访问路径为：file:///Users/xiao**/learn/js_basics/11.html?a=100&b=20&c=30；
分别通过【正则匹配】、【拆分字符串成数组】、【新API URLSearchParams】三种方式获取参数方法如下：

方法一、正则方法匹配需要的参数

//search属性获取到带？的参数字符串
console.log(location.search) //?a=100&b=20&c=30
function query(name) {
      const search = location.search.substr(1) //截取第一个字符？后的字符串 a=100&b=20&c=30
// search:a=100&b=20
const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')
// ()作为一个整体
// [] 多个选择一个
// [^..] 排除..
// (^|&)：以空字符或者&开头；
// ([^&]*)：除了&的字符一个或多个
// (&|$)：以&或者空字符结尾；
// i：不区分大小写
const res = search.match(reg)
console.log(res)
if (res === null) {
return null
}
return res[2]
}
query('a') //res:["a=100&","","100","&"] 100
query('b') //res:["&b=20","&","20","&"] 20
query('c') //res:["&c=30","&","30",""] 30
query('d') //null

方法二：拆分字符串成数组的方式

思路：
两次用到split方法，第一次将每个参数和值拆分为数组中的一个值；
遍历这个数组，每个参数和值再次分割，分别将参数和值赋值给一个对象的属性和值；
调用方法通过对象的属性，获取改值

function query() {
  const res={}
  const search = location.search.substr(1)
  // search.split('&')：["a=100", "b=20", "c=30"]
  search.split('&').forEach(item => {
    const arr =item.split('=')
    const key=arr[0]
    const val=arr[1]
    res[key]=val
  });
  return res
}
query().a //100

方法三：新 API：URLSearchParams

URLSearchParams 接口定义了一些实用的方法来处理 URL 的查询字符串。

function query(name) {
  const search = location.search.substr(1) //截取第一个字符后的字符串 a=100&b=20&c=30
  const p=new URLSearchParams(search)
  return p.get(name)
}
console.log(query('a'))