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)