码迷,mamicode.com
首页 > 其他好文 > 详细

模板字符串

时间:2019-05-02 10:06:02      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:for   char   each   ring   inner   标签   data   nbsp   add   

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

 

模板字符串

标签:for   char   each   ring   inner   标签   data   nbsp   add   

原文地址:https://www.cnblogs.com/wanqingcui/p/10801467.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!