开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第7天，点击查看活动详情

前言

页面之间的通信传参是很常见的一种需求，在我们使用vue、react框架时，有好几种方法传递参数。有些时候我们需要通过url传参，比如iframe嵌入其他页面。这时候我们要能从url上面获取想要的参数值，下面我们就来讲解一下如何通过JS方法获取参数值。

url

url:统一资源定位符，简单来说就是用来搜索访问互联网上的资源。url由协议、域名等构成，具体构成如下： 协议+域名/ip地址+端口号+路径+参数

   'http://www.baidu.com/s?ie=UTF-8&wd=baidu'
   'http://10.0.3.128:39100/login?id:123456'
   //http为协议 一般是http或https https的安全性更高

路径后面拼接的就是参数，之间用来‘?’进行了连接，参数就跟后面，具体格式为： 参数1=参数1的值&参数2=参数2的值...
所以我们想要得到url上某个参数值就是获取等号后面的值。

方法

明确了目的下一步就好办了，怎么获取呢？参数的格式都是固定的，当有多个的时候，我们要筛选确定，刚好数组当中有一个split方法——根据对应参数将字符串分割成数据，通过该方法组合成一个对象，就能得到我们想要的参数值；从另一个角度思考把url当成字符串，因为参数格式相对固定，所以我们可以利用正则匹配。

数组split方法

在windo的lacation对象中有window.location.search可以获取‘?’及后面的内容，返回内容包含‘?’。我们可以利用该方法简化下操作，通过substr方法去掉‘?’，新建一个对象，通过split('&')进行分割得到数组，循环数组再通过split('=')分割组合成对象即可。具体代码如下：

    /**
     * @param string 参数名
     * @return string | string[] 参数值
    **/
    function getParams(name) {
      //获取拼接的参数
      const paramStr = window.location.search.substring(1);
      //第一次分割
      const paramsArr = paramStr.split('&');
      const obj = {};
      paramsArr.forEach((param) => {
        //第二次分割
        const paramArr = param.split('=');
        const pKey = paramArr[0];
        const pValue = paramArr[1];
        if (!obj[pKey]) {
          obj[pKey] = pValue;
        } else {
          //考虑下数组参数
          if (Array.isArray(obj[pKey])) {
            obj[pKey].push(pValue);
          } else {
            obj[pKey] = [obj[pKey], pValue];
          }
        }
      });
      return obj[name];
    }

正则

正则方法相对要简单的多，前提是我们要熟悉正则写法，根据参数拼接格式我们可以分析出正则匹配规则，以&或空开头+参数名+后面跟着'='直到下个'&'结束。

   function getParams(name) {
      const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      const result = window.location.search.substr(1).match(reg);
      if (result != null) {
        return unescape(result[2]);
      }
      return null;
    }

以上就是JS获取url参数值的两种方法，JS方法稍显复杂点，url中有对应API可以帮助我们快速获取：

URLSearchParams用于处理url上的参数，通过.entries方法获取键值对。

   const search = new URLSearchParams("?a=1&b=2").entries();
   //转换为对象
   const params = Object.fromEntries(search) 
   console.log(params) // {a:1,b:2}

该方法需要注意兼容性，不支持IE11。

总结

正则方法相对简单但我们要写对正则规则，split思路简单，但是操作复杂点，日常开发中我们可以直接选择URLSearchParams快速获取。

JS学习——获取url参数值

前言

url

方法

数组split方法

正则

总结