模板字符串是什么
1.认识模板字符串
2.模板字符串与一般字符串的区别
模板字符串的注意事项
1.输出多行字符串
- 模板字符串中,所有的空格、换行或缩进都会被保留在输出之中。
2.输出 ` 和 \ 等特殊字符
3.模板字符串的注入
- 只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中。
模板字符串的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模板字符串的应用</title>
<style>
body {
padding: 50px 0 0 300px;
font-size: 22px;
}
ul {
padding: 0;
}
p {
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>学生信息表</p>
<ul id="list">
<li style="list-style: none;">信息加载中……</li>
</ul>
<script>
// 数据
const students = [
{
username: 'Alex',
age: 18,
sex: 'male'
},
{
username: 'ZhangSan',
age: 28,
sex: 'male'
},
{
username: 'LiSi',
age: 20,
sex: 'female'
}
];
const list = document.getElementById('list');
let html = '';
for (let i = 0; i < students.length; i++) {
html += `<li>我是:${students[i].username}, 性别:${students[i].sex}, 年龄:${students[i].age}</li>`;
}
list.innerHTML = html;
</script>
</body>
</html>