${ } 模板字符串占位符 需要用反引号` `
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> ` )
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。