的
1 <script> 2 const person='jelly'; 3 const age=5; 4 const sentence=`${person} is ${age * 5} yesr old`.trim(); 5 console.log(sentence); 6 const wqc={ 7 data:'2017-01-9', 8 name:'wqc', 9 todos:[ 10 {name:'go to store',completedd:false}, 11 {name:'watch movie',completedd:true}, 12 {name:'running',completedd:true} 13 ] 14 } 15 const tempalte=` 16 <ul> 17 ${wqc.todos.map(todo =>`<li>${todo.name}</li>`).join('')} 18 </ul>` 19 document.body.innerHTML=tempalte; 20 </script>
标签模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.light{
padding: 2px 5px;
background: red;
color: white
}
</style>
<body>
<script>
// 由于模板字符串的普通字符string，模板字符里面的变量 比如${user}
function highlight(strings,...values){
const highlighted=values.map(value=>`<span class="light">${value}<span>`);
console.log(highlighted)
// let str='';
// strings.forEach((string,i) =>str+=`${string}${highlighted[i]||''}`);
// // 注意如果是以变量结尾的话，最后一个变量是一个空的字符串
// return str;
return strings.reduce((prev,curr,i)=>`${prev}${curr}${highlighted[i]||''}`,'')
}
const user='Marry';
const topic='learn to use markdom'
const sentence=highlight`${user} has comeneted on your topic ${topic}`;
document.body.innerHTML=sentence
</script>
</body>
</html>
标签模板字符串的使用
过滤用户的输入
1.使用标签模板字符串可以对字符串进行处理 返回我们想要的字符串，防止xss攻击，用户通过输入非法字符串和脚本来窃取用户的session和敏感信息，因此需要对用户的输入进行处理