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 || ''}`);
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
---------------------
作者:weixin_42554311
来源:CSDN
原文:https://blog.csdn.net/weixin_425 ... 597?utm_source=copy
版权声明:本文为博主原创文章,转载请附上博文链接!
|
|