字符串的拼接方法

數據交互常見的字符串拼接

博主最近事情有點忙，趁現在有點空閑時間，來總結一下工作中遇到的字符串拼接問題。說到字符串的拼接無外乎一下幾種方式：

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

第三種方法比較靈活，這種方式要注意一點，也是實現的關鍵：每一行的最后，都加上轉義斜線\，但沒有后續字符，只有個\。

好了，夜深了 博主也要擼一局睡覺了，有機會大家進群里探討啊 web前端開發 474471759。