标签:调用 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> ` )
标签:调用 font uppercase react sel function status lse std
原文地址:https://www.cnblogs.com/rickdiculous/p/13122358.html