简单的字符串模板

每次在写脚本的时候拼装字符串是个头痛的事情，主要是双引号，单引号，还有一堆变量，一不小心就搞错了，而且可读性非常差。这里推荐一个小工具：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》，看了之后感觉比我这个完善的多了，推荐一下！