码迷,mamicode.com
首页 > 其他好文 > 详细

ES6扩展——模板字符串

时间:2020-06-14 01:26:25      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:调用   font   uppercase   react   sel   function   status   lse   std   

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

 

 

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

 






ES6扩展——模板字符串

标签:调用   font   uppercase   react   sel   function   status   lse   std   

原文地址:https://www.cnblogs.com/rickdiculous/p/13122358.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!