Js中split()方法的正确使用

Posted 2020-09-09 光炎

通过 js 获取 QueryString (location.search部分) 参数很常见，网上代码也满天飞。
不过现在的框架，基本上都通过路由伪静态了，把以前的 QueryString 变成了
pathname (location.pathname部分) 路径参数了。

例如：/index.html?id=22&name=abc
很多框架都是渲染为 /index/id/22/name/abc.html

那么怎么获取 pathname 级的参数呢？有人觉得改下 QueryString 代码的正则即可。
虽然可以，但是比较麻烦，而且正则写的不严谨，可能匹配不精确，导致有些参数匹配不到。

其实无论是 QueryString，pathname，用正则都不是最合理的，而应该采取 split 大法。
为什么这么说呢，我举个例子，大家就会明白了。

例如 /index.html?id=22&name=abc&DEBUG
例如 /index/id/22/name/ab.cd?DEBUG

正则都很难处理这的情况，QueryString 到还好，pathname 的，就纠结的要死了。
这种情况，我们就应该祭出 split 大法来处理这些烦人的问题了。
由于 split 无论是否分割成功，都会返回数组，所以最合适处理这样的问题。

 

 1 /**
 2  * 获取 QueryString
 3  * @param  {string} [name] 参数名，可空
 4  * @param  {string} [search] search部分值，可空
 5  * @return {string|object} 值或整个对象
 6  */
 7 function getQueryString(name, search) {
 8     var url = search || location.search;
 9     var params = {};
10 
11     if (url.indexOf(‘?‘) != -1) {
12         var arr = url.substring(1).split(‘&‘); // 分割参数
13         for(var i = 0, l = arr.length; i < l; i ++) { // 遍历参数
14             var kv = arr[i].split(‘=‘); // 分隔键值对
15             params[kv.shift()] = kv.length ? decodeURIComponent(kv.join(‘=‘)) : undefined; // 如果有值就解码存储
16         }
17     }
18 
19     return name ? params[name] : params; // 输出 name 的值或整个参数对象
20 }
21 
22 // 假设 search 值为 ?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG
23 console.log( getQueryString() ); // => {uid: "KB1R+qyhl24II350DQ=", name: "abc", DEBUG: undefined}
24 console.log( getQueryString(‘uid‘) ); // => KB1R+qyhl24II350DQ=
25 // 或
26 console.log( getQueryString(‘name‘, ‘?uid=KB1R+qyhl24II350DQ=&name=abc&DEBUG‘) ); // => abc

 1 /**
 2  * 获取 pathname
 3  * @param  {string} [name] 参数名，可空
 4  * @param  {string} [path] pathname部分值，可空
 5  * @return {string|object} 值或整个对象
 6  */
 7 function getPathNmae(name, path) {
 8     var params = {};
 9     path = (path || location.pathname)
10         .split(‘.html‘)[0] // 获取 .html 之前的部分
11         .split(‘/‘); // 分隔目录
12 
13     while (path.length) { // 从后遍历数组
14         var val = path.pop(); // 得到值
15         var key = path.pop(); // 得到键
16 
17         if (key) {
18             params[key] = decodeURIComponent(val); // 解码存储
19         }
20     }
21 
22     return name ? params[name] : params; // 输出name的值或整个参数对象
23 }
24 
25 // 假设 pathname 值为 /index/id/22/name/abc.html
26 console.log( getPathNmae() ); // {id: "22", name: "abc"}
27 console.log( getPathNmae(‘name‘) ); // abc
28 // 或
29 console.log( getPathNmae(‘name‘, ‘/index/id/22/name/abc.html‘) ); // abc