字符串拼接 - 爱码网

数据交互常见的字符串拼接

博主最近事情有点忙，趁现在有点空闲时间，来总结一下工作中遇到的字符串拼接问题。说到字符串的拼接无外乎一下几种方式：

1.通过\'+\'进行拼接

var arr =[\'今天\',昨天\',\'明天\'];
$(
    \'<div class="show">\'+
        \'<ul class="app">\'+
            \'<li>\'+arr[0]+\'</li>\'+
            \'<li>\'+arr[1]+\'</li>\'+
            \'<li>\'+arr[2]+\'</li>\'+
        \'</ul>\'+
    \'</div>\'
).appendTo(\'.bo\')//创建新的节点并插入到.bo

这种方法大家最常用，但是有个不好的就是自己在做模版的时候，常常会因为少写或者多写分号而出错，而且这种出错不易察觉，时常会浪费很多宝贵的时间。

2.通过数组去拼接

 var arr =[\'今天\',\'昨天\',\'明天\']；
var str =\'\';
str+=[\'<div class="show">\',
        \'<ul>\',
            \'<li><a href="">\'+arr[0]+\'</a></li>\',
            \'<li><a href="">\'+arr[1]+\'</a></li>\',
            \'<li><a href="">\'+arr[2]+\'</a></li>\',
        \'</ul>\',
    \'</div>\'
].join(\'\');
$(\'.bo\').append(str);

这种方式显得高大上一些，而且使用的频率也非常大。博主经常会使用这种方式，因为这种方式不容易出错，及时出错了也可以立马发现错误。

3.最近新学的一种字符串拼接方式，比前面两种方式显得更为简洁一些

var dataList = \'<div id="box">\
<ul class="LearnList">\
<li class="list">HTML</li>\
<li class="list">CSS</li>\
<li class="list">JS</li>\
<li class="list">NODE</li>\
<li class="list">ANGLUAR</li>\
<li class="list">JSON</li>\
</ul>\
</div>\'

第三种方法比较灵活，这种方式要注意一点，也是实现的关键：每一行的最后，都加上转义斜线，但没有后续字符，只有个。