每次在写脚本的时候拼装字符串是个头痛的事情，主要是双引号，单引号，还有一堆变量，一不小心就搞错了，而且可读性非常差。这里推荐一个小工具：http://www.html-js.com/my-js/version0.0.1/tool/html2string.html 这个工具可以将复杂的字符串转换成js的字符串。至少解决的了手动拼装的的问题，但是变量的话还是非常难受。比如一个列表：

  • 《愚人码头》 – 熊天平
  • 《富士山下》 - 陈奕迅
  • 《假如》 – 信乐团
  • …
通常如果是异步的请求，后端一般返回回来的是一个json：
1 [
2 {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"},
3 {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"},
4 {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"}
5 ]

通常情况下会这样拼装：

01 var listData=[
02 {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"},
03 {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"},
04 {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"}
05 ];
06     var listHtml="<ul>"
07     for(var i=0,lengths = listData.length;i < lengths;i++){
08         listHtml+='<li class="item">《'+listData[i].song+'》 - <span>'+listData[i].songer+'</span>'
09     }
10     listHtml+="</ul>"
11     console.log(listHtml);


如果给歌曲歌手加链接更加复杂。群里有人可以引入模板概念，这样至少结构上可以清晰，可读性会增强.
写了一段脚本：

1 String.prototype.formatTemp = function(temp){
2     var str=this;
3     for(var k in temp){
4         var regObj = new RegExp("{"+k+"}","g");
5         str = str.replace(regObj,temp[k]);
6     }
7     return str;
8 };

这样可以将上面的脚本改写成：

01 var listData=[
02 {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"},
03 {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"},
04 {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"}
05 ];
06     var listHtml="<ul>",
07         temp='<li class="item">《{song}》 - <span>{songer}</span></li>'
08     for(var i=0,lengths = listData.length;i < lengths;i++){
09         listHtml+=temp.formatTemp(listData[i]);
10     }
11     listHtml+="</ul>"
12     console.log(listHtml);

当然可以用数组拼装：

01 var listData=[
02 {"song":"愚人码头","songurl":"http://www.css88.com/mp3/1.html","songer":"熊天平","songerurl":"http://www.css88.com/songer/1.html"},
03 {"song":"富士山下","songurl":"http://www.css88.com/mp3/2.html","songer":"陈奕迅","songerurl":"http://www.css88.com/songer/2.html"},
04 {"song":"假如","songurl":"http://www.css88.com/mp3/3.html","songer":"信乐团","songerurl":"http://www.css88.com/songer/3.html"}
05 ];
06     var listHtml="</ul><ul>",
07         temp='<li class="item">《{song}》 - <span>{songer}</span></li>',
08         listArr=[];
09     for(var i=0,lengths = listData.length;i < lengths;i++){
10         listArr.push(temp.formatTemp(listData[i]));
11     }
12     listHtml+=listArr.join("");
13     console.log(listHtml);
群里的朋友很活跃，分享了怿飞的一篇文章《Simple JavaScript Template : substitute》，看了之后感觉比我这个完善的多了，推荐一下！