前端获取地址栏参数的几种方法

**1 使用

URLSearchParams

API**（现代浏览器支持）

   const urlParams = new URLSearchParams(window.location.search);
   const paramsObject = {};
   for (const param of urlParams.entries()) {
       paramsObject[param[0]] = param[1];
   }
   console.log(paramsObject);

2 **使用

split()

和

reduce()

**

   const urlParams = window.location.search.substring(1).split('&');
   const paramsObject = urlParams.reduce((params, param) => {
       const [key, value] = param.split('=');
       params[key] = decodeURIComponent(value);
       return params;
   }, {});
   console.log(paramsObject);

3 使用正则表达式匹配

   const urlParams = window.location.search.substr(1).match(/(\w+)=?([\w%]+)?/g);
   const paramsObject = {};
   urlParams.forEach(param => {
       const [key, value] = param.split('=');
       paramsObject[key] = decodeURIComponent(value || '');
   });
   console.log(paramsObject);

4 如果使用jQuery或Zepto.js，可以这样

   function getURLParams() {
       var params = {};
       $.each(window.location.search.slice(1).split('&'), function(i, param) {
           var parts = param.split('=');
           params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1] || '');
       });
       return params;
   }

   var params = getURLParams();
   console.log(params);

以上方法中，

window.location.search

返回URL查询字符串（即URL中

?

后面的部分）。注意，所有方法都需要对参数进行解码，以防URL编码导致的中文乱码问题，使用

decodeURIComponent()

函数来进行解码。