ES--模板字符串

模板字符串

认识模板字符串

• 用反引号包裹

• 和其他东西一起使用时，使用模板字符串方便注入

  const person = {
   username: 'Alex',
    age: 18,
    sex: 'male'
  };
  
  // 一般字符串
  const info='名字'+person.username+'年龄'+person.age;
  //模板字符串
  const info_mb=`名字${person.username} 年龄${person.age}`;
  console.log(info);
  console.log(info_mb);
  

注意事项

• 输出多行字符串：一般字符串用\n；模板字符串中所有空格，换行或缩进都会被保留在输出之中
• 输出特殊字符：用 \ 进行转义
• 模板字符串的注入：只要最终可以得出一个值的就可以通过${}注入到模板字符串

模板字符串的应用

数据动态加到ul中

<p>学生信息</p>
<ul id="list">
	<li >sdf</li>
</ul>

//学生数据
const student = [
	{
		name:"haha1",
		age:18
	},
	{
		name:"haha2",
		age:19
	},
	{
		name:"haha3",
		age:16
	}
];
const list=document.getElementById('list');
let html='';

for(let i=0; i < student.length; i++){
	html +=`<li>名字：${student[i].name}; 年龄：${student[i].age}</li>`;
}

list.innerHTML=html;