解析查询 queryString 请求参数的函数

 

又一次碰到这个问题，不长记性的按照最简单的脑回路去处理，被说了，幸亏当时写博记录了下翻出来了，再补充些其他的方法吧。

url: http://10.10.1.149:3000/wechat/index?tab=6&0.13189101305300976

需求：获取 tab 的值

 

1、简单直白的写法，但是会有隐患，写法如下：

var querystringTab = window.location.search.split('&')[0].split('=')[1]

 

2、URLSearchParams 处理 url 查询字符串，IE 有兼容问题

（https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams）

var urlParams = new URLSearchParams(window.location.search);

var querystringTab = urlParams.get('tab') || 0;

 

3、处理 queryString 的方法如下：

// 例如当前网页地址为 https://i.cnblogs.com/EditPosts.aspx?opt=1&name=hhh  

function getQueryVariable(variable) {
       var query = window.location.search.substring(1);
       var vars = query.split('&');
       for (var i = 0; i < vars.length; i++) {
             var pair = vars[i].split('=');
               if (decodeURIComponent(pair[0]) == variable) {
                     return decodeURIComponent(pair[1]);
               }
       }
  }
 var value = getQueryVariable("name") // 获取key值为 name 对应的 value
 console.log(value) // "hhh"

 

quety string 请求参数

1. 本质上可以理解为一种序列化的格式，与 json 类似，它是一种字典类型的容器，里面可以保存键值对（key-value pair）。只不过 querystring 这种形式的限制比较多，其 value 只有字符串型。
2. Query String 的格式实际上没有要求，当写成 key1=value1&key2=value2&... 这种形式时，Query String 实际上就是一个字典。字典里的字段，大家有时候叫变量（Variable），有时候叫参数（Param），在没有歧义的时候，可以随意称呼。
3. 是URL在 ? 后面、#前面的所有内容，整个这一段文字叫 query string，有些地方也叫 search （比如 window.location.search这里 search 这个变量名就是告诉你，这个东西叫 search）

 

参考文档：

该方法具体用法及介绍：

https://stackoverflow.com/questions/2090551/parse-query-string-in-javascript/2091331#2091331