简单的字符串模板
每次在写脚本的时候拼装字符串是个头痛的事情,主要是双引号,单引号,还有一堆变量,一不小心就搞错了,而且可读性非常差。这里推荐一个小工具:http://www.html-js.com/my-js/version0.0.1/tool/html2string.html 这个工具可以将复杂的字符串转换成js的字符串。至少解决的了手动拼装的的问题,但是变量的话还是非常难受。比如一个列表:
- 《愚人码头》 – 熊天平
- 《富士山下》 - 陈奕迅
- 《假如》 – 信乐团
- …
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); |