JavaScript URL 参数拼接的三种方式对比与优化

直接字符串拼接的局限性

最基础且直观的做法是直接拼接字符串。

url?arg1=value1&arg2=value2&arg3=value3...

这种传统方式虽然简单易懂，但在实际项目中，当后续携带的参数数量可变、字段值不同或语义复杂时，其可维护性和可读性往往不尽如人意，且容易导致代码重复或冗余。

例如，以下是一个针对CGI接口的请求串构建场景：

 
var url = "http://www.tenpay.com/app/v1.0/juhui.cgi?";
var queryString = "method=2&page=index";
if(content a){ //访问的首页的区域A,需要加参数subpage
queryString += "&subpage=a";
}else if(content b){//如果访问了区域B,则参数subpage要变为b
queryString += "&subpage=b";
} 
}if(spec_method){
//如果查看的时候要按照指定的筛选方法,则还需要加参数spec_method
queryString += "&spec_method=1"
} 

这是最典型的字符串拼接逻辑。虽然功能上没有问题，但编写注释较为繁琐，可读性较差，字段含义不明确。若需修改某个字段或调整逻辑，代码改动较为麻烦。

基于对象的参数配置方案

参考了一些同事针对此问题的解决方案，第一种方法是将参数以对象形式存储，然后在发起请求时通过特定方法将参数拼接起来：

 
var queryConfig={
"page" : "index",
"method" : 2, //1:按照方法A查看 2:按照方法B查看
"subpage" : -1, //-1:此条件不传递 a:查看contentA b:查看contentB
"spec_method" :-1 //-1:此条件不传递 1:按照销量高低查 2:按照时间查
}; 
var setQueryConfig = function(){
var _str = "";
for(var o in queryConfig){
if(queryConfig[o] != -1){
_str += o + "=" + queryConfig[o] + "&";
} 
} 
var _str = _str.substring(0, str.length-1);
return _str;
} 

这种方法优点显著，所有参数在对象中一目了然，且可为每个字段添加详细注释，大幅提升了可读性和维护性；但缺点在于代码量稍多，且需要额外编写一个方法来组合参数。

基于数组的拼接策略

另外还有一种利用数组的方法：

 
var queryString = [
"method=2", //method字段的注释
"page=index"
]; 
if(content a){ //访问的首页的区域A,需要加参数subpage
queryString.concat([
"subpage=a", //subpage注释
]); 
]}else if(content b){//如果访问了区域B,则参数subpage要变为b
queryString.concat([
"subpage=b", //subpage注释
]); 
} 
]}if(spec_method){
//如果查看的时候要按照指定的筛选方法,则还需要加参数 queryString.concat([
"spec_method=2", //spec_method注释
]); 
} 
]}queryString = queryString.join("&");

该方法的可读性可能略逊于对象方案，但维护性依然较高，且代码量相对较少。从个人偏好来看，这种方法更为可取。

若非昨天的代码评审，这样细微的代码优化可能需要在很久之后才能被发现。看来代码评审确实是提升个人能力的加速器。

以上是我目前发现的两种有效方法，若后续发现更优方案，将补充更新。