聊聊解析URL中的search为JSON的几个方案

@GuoYongfeng 2017-03-30 12:29:32发表于 iuap-design/blog

项目开发中正好又遇到了这个需求,这里列出几个对应实现方案供大家交流讨论。

需求

http://localhost:3005/exchange-status?code=898%20899%20889&amount=9999

需要解析得到类似以下结果:

{ code: "", amount: "" }

这是个很常见也是很基础的话题,考察以下几个知识点:

  • 对 Location 对象的认识
  • 对字符串 String 的基本操作方法
  • 字符串的解码和转码
  • 对封装函数的考虑

方案 1

最原始简介的实现,绝不拖泥带水。

function searchToObject() {
  var pairs = window.location.search.substring(1).split("&"),
    obj = {},
    pair,
    i;

  for ( i in pairs ) {
    if ( pairs[i] === "" ) continue;

    pair = pairs[i].split("=");
    obj[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
  }

  return obj;
}

方案 2

升级一点了,给函数加上了一个传参,稍微灵活些;而且使用到了 reduce 这个 API。

function searchToObject(search) {
  return search.substring(1).split("&").reduce(function(result, value) {
    var parts = value.split('=');
    if (parts[0]) result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
    return result;
  }, {})
}

方案 3

带上了 ES6 的一些语法,代码本身的组织也更加清晰易懂。

const searchToObject = searchString => {
    if (!searchString) return false;

    return searchString
        .substring(1)
        .split('&')
        .reduce((result, next) => {
            let pair = next.split('=');
            result[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);

            return result;
        }, {});
};

const searchData = urlSearchData(window.location.search);

方案 4

可以基于正则和字符串的 replace 方法来实现:

function parse(url){
	var pattern = /(\w+)=(\w+)/ig;
	var params = {};

	url.replace(pattern, function(a, b, c){
		params[b] = c;
	})

	return params
}

小结

优化无止境,每个功能实现之余,可以多思考一下,慢慢你的代码会越来越美。