ES6扩展——模板字符串

${ } 模板字符串占位符 需要用反引号` `

 

 

1、模板字符串 `${变量}`

            const xiaoming = {
                name:'xiaoming',
                age:14,
                say1:function(){
                    console.log('我叫'+ this.name + '，我今年'+this.age +'岁！');
                },
                say2:function(){
                    console.log(`我叫${`Mr.${this.name.toUpperCase()}`},我今年${this.age}岁!`);
                }
            }
            
            xiaoming.say1();
            xiaoming.say2();

 

2、模拟从服务端拿数据，把数据渲染成一个ul列表

            //模拟从服务端拿数据,把数据渲染成一个ul列表
            const getImoocCourseList = function(){
                //ajax
                return {
                    status:true,
                    msg:'获取成功',
                    data:[{
                        id:1,
                        title:'vue入门',
                        date:'xxxx-01-09'
                    },{
                        id:2,
                        title:'es6入门',
                        date:'xxxx-01-10'
                    },{
                        id:3,
                        title:'react入门',
                        date:'xxxx-01-11'
                    }]    
                }
            }
            
            const {data:listData, status, msg} = getImoocCourseList();
            
            function foo(val){
                return val.replace('xxxx','xoxo');
            }
            
            if(status){
                //声明一个数组,用来存放每个li的html字符串
                let arr = [];
                
                listData.forEach(function({date,title}){
                    // arr.push(
                    //     '<li>'+
                    //         '<span>' + title + '</span>' +
                    //         '<span>' + date + '</span>' +
                    //     '</li>'
                    // );
                    
                    arr.push(
                        `
                            <li>
                                <span>${ `课程名:${title}` }</span>
                                <span>${ foo(date).toUpperCase() }</span>
                        `
                    );
                });
                let ul = document.createElement('ul');
                ul.innerHTML = arr.join('');
                document.body.appendChild(ul);
            }else{
                alert(msg);
            }
            

 

 

3、使用反引号的模板字符串还可以嵌套反引号，并且还可以在花括号内写一些简单的表达式（比如调用方法toUpperCase等）：

function foo(val){
return val.replace('xxxx','xoxo');
}

arr.push(
`
<li>
<span>${`课程名:${title}`}</span>
<span>${foo(date)}</span>
</li>
`
)