字符串拼接

Posted 2020-12-24 zhouyx

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

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

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>‘

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