ES6模板字符串

ES6提供了模板字符串使字符串的拼接以及模板的编写变得特别简单,组合字符串的时候不在需要加号单引号这些，直接使用一对反引号即可，而且字符串中需要变量的时候直接${变量名}的这种方式，大括号里面可以是任何的js表达式，变量，对象的属性，还可以是一个函数，模板字符串还可以进行嵌套。

const person='lili';

const age=5;

const sentence=`${person} is ${age*2} years old`

console.log(sentence);

模板字符串嵌套例子：

<script>

const join={

name:'join',

todolist:[

{do:'go to store',complete:false},

{do:'watching TV',complete:true},

{do:'go home',complete:true}

]

}

const template=`<ul>${join.todolist.map(todo=>`<li>${todo.do} ${todo.complete ? '√'：'×'}</li>`).join('')}</ul>`

document.body.innerHTML=template;

</script>

标签模板字符串，主要用于处理模板字符串，返回我们想要的字符串。下面的写法可以变量的部分添加高亮。

<style>

.hightLight{

color:red;

}

</style>

<script>

function highLight(strings,...values){

const hightLighted = values.map(value=>`<span class="hightLight">${value}</span>`);

let str='';

strings.forEach((string,i)=>str+=`${string}${hightLighted[i] || ''}`);

return str;

};

const user='Mary';

const topic='Learn to use markdown';

const sencence=highLight`${user} has commented on your topic ${topic}`

document.body.innerHTML=sencence;

</script>

注意标签模板字符串还可以预防xss攻击，对用户输入内容做净化，使用DOMPurify