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 = `

    
第一行
    
第二行
`

 html += `
class="item">
                    
class="info">
                        "${items[i].authorPhoto}" alt="">
                        ${items[i].authorName}
                    
                    
class="wp">
                    "/app/forum/${items[i].link.split('/')[items[i].link.split('/').length-1]}" class="js_reportJXA_${currPage}_${i}">"${items[i].appPicUrl}" alt="" class="content_img">
                    

                    
class="title">${items[i].title}
                    
class="label">
                        
class="left">
                            class="lb js_reportJXB_${currPage}_${i}" style="display:${items[i].sourceName?'inline-block':'none'}">${items[i].sourceName}
                            class="lb" style="display:${items[i].tags?'inline-block':'none'}">${items[i].tags.split(",")[0]}
                        
                        
class="right">
                            
class="icon">
                                class="iconfont iconhuifu-iconhuifu-">${items[i].replies}
                                class="iconfont icondianzan-icondianzan-copy">${items[i].loves}
                            
                        
                    
                
`

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