模板字符串

的

 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和敏感信息，因此需要对用户的输入进行处理