split 方法的正确使用姿势

本文同步自我的个人博客：http://www.52cik.com/2015/11/02/split-skill.html

通过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 无论是否分割成功，都会返回数组，所以最合适处理这样的问题。

/**
 * 获取 QueryString
 * @param  {string} [name] 参数名，可空
 * @param  {string} [search] search部分值，可空
 * @return {string|object} 值或整个对象
 */
function getQueryString(name, search) {
    var url = search || location.search;
    var params = {};

    if (url.indexOf("?") != -1) {
        var arr = url.substr(1).split("&"); // 分割参数
        for(var i = 0, l = arr.length; i < l; i ++) { // 遍历参数
        	var kv = arr[i].split("="); // 分隔键值对
            params[kv[0]] = kv[1] && unescape(kv[1]); // 如果有值就解码存储
        }
    }

    return name ? params[name] : params; // 输出name的值或整个参数对象
}

// 假设 search 值为 ?id=22&name=abc&DEBUG
console.log( getQueryString() ); // {id: "22", name: "abc", DEBUG: undefined}
console.log( getQueryString("name") ); // abc

console.log( getQueryString("name", "?id=22&name=abc&DEBUG") ); // abc

/**
 * 获取 pathname
 * @param  {string} [name] 参数名，可空
 * @param  {string} [path] pathname部分值，可空
 * @return {string|object} 值或整个对象
 */
function getPathNmae(name, path) {
    var params = {};
    path = (path || location.pathname)
        .split(".html")[0] // 获取 .html 之前的部分
        .split("/"); // 分隔目录

    while (path.length) { // 从后遍历数组
        var val = path.pop(); // 得到值
        var key = path.pop(); // 得到键

        if (key) {
            params[key] = unescape(val); // 解码存储
        }
    }

    return name ? params[name] : params; // 输出name的值或整个参数对象
}

// 假设 pathname 值为 /index/id/22/name/abc.html
console.log( getPathNmae() ); // {id: "22", name: "abc"}
console.log( getPathNmae("name") ); // abc

console.log( getPathNmae("name", "/index/id/22/name/abc.html") ); // abc

这样，简单又精确，而且兼容性比网上那些满天飞的代码要好。