es6 字符串模板拼接和傳統字符串拼接

字符串拼接是在日常開發中必不可少的一個環節。

注意：字符串可以用單引號''，或者""雙引號，出於方便大家理解，文章以下內容統一使用單引號''！

如果只是一個字符串和一個變量拼接，使用傳統的字符串拼接就沒什么問題，只需要一個+號和一個''號就好了；但是有時候會有多個字符串與變量拼接，那么就會有一大堆的+號和''號，造成代碼不美觀。

1. 傳統的字符串拼接

var name = 'moss';
var age = 18;
console.log('My name is ' + name + ' and I am ' + age + ' years old');
// 打印結果：My name is moss and I am 18 years old

 

2. es6的模板字符串拼接

es6的模板字符串解決了以上問題

用兩個反單引號``包裹的字符串就是字符串模板，在字符串模板中可以使用${}符號來引用變量。（反單引號``在Tab按鍵上面）

var name = 'moss';
var age = 18;
console.log(`My name is ${name} and I am ${age} years old`);
// 打印結果：My name is moss and I am 18 years old

 

拼接html字符串的話，也是使用一個``就可以搞掂了！

var html = `<ul>
    <li>第一行</li>
    <li>第二行</li>
</ul>`

 html += `<div class="item">
                    <div class="info">
                        <img src="${items[i].authorPhoto}" alt="">
                        <span>${items[i].authorName}</span>
                    </div>
                    <div class="wp">
                    <a href="/app/forum/${items[i].link.split('/')[items[i].link.split('/').length-1]}" class="js_reportJXA_${currPage}_${i}"><img src="${items[i].appPicUrl}" alt="" class="content_img">
                    </div>
                    <p class="title"><span>${items[i].title}</span></p></a>
                    <div class="label">
                        <div class="left">
                            <a class="lb js_reportJXB_${currPage}_${i}" style="display:${items[i].sourceName?'inline-block':'none'}">${items[i].sourceName}</a>
                            <span class="lb" style="display:${items[i].tags?'inline-block':'none'}">${items[i].tags.split(",")[0]}</span>
                        </div>
                        <div class="right">
                            <div class="icon">
                                <span><i class="iconfont iconhuifu-iconhuifu-"></i>${items[i].replies}</span>
                                <span><i class="iconfont icondianzan-icondianzan-copy"></i>${items[i].loves}</span>
                            </div>
                        </div>
                    </div>
                </div>`

  $('#loadmore').append(html)