本篇先简单介绍模板字面量及标签模板，再引出其应用——防止XSS攻击
一.简介模板字面量（即模板字符串，MDN已更新为"模板字面量"的说法，此文以后都用“模板字面量”）
ES6中引入了模板字面量来代替传统JS的输出模板，直接看代码最清楚吧
模板字面量（看es6.innerHTML段代码）：
显示如下：（注意上面代码中前后为 ` ，而不是 ‘ ，我之前就因为打错了傻逼了5分钟）
传统js的输出模板（看es5.innerHTML段代码）：
显示如下：
相比较之下，es6的模板字面量更显简洁并容易修改
es6变量嵌入的简易性使得打代码时不用再抓狂于传统js中麻烦的格式
但这只是模板字面量的优点之一
这里我们引出它的一个功能——”标签模板“功能及它的一个重要应用——过滤HTML字符串，防止用户输入恶意内容（防XSS攻击）（此应用学习于阮老师的《es6标准入门（第3版）》）
二.标签模板介绍及其使用
”标签模板“功能：模板字面量可以紧跟在一个函数名后面，函数会处理这个模板字面量
举个最简单的例子
alert`111`;
相当于
alert(111);
注意，”标签模板其实不是模板，而是函数调用的一种特殊形式。’标签‘指的就是函数，紧跟在后面的模板字面量就是它的参数“
下面我们用代码说明一下问题，再依次解释各个形参
var a = 'I am a';var b = 'I am b';function display(stringArr, value1, value2) {console.log(stringArr);console.log(value1);console.log(value2);} 接着使用字面量模板
display`Hello！ ${a} and ${b}`; 看看控制台：
各个变量意义：
stringArr：放置所有`不是变量替换的部分`，即把字符串都放进去，且按各变量和头尾进行分割。如例子中，内容被分割为三部分”Hello！“，”and“以及最后空白的”“value1：存放模板字面量中的第一个变量。如例子中，存放了变量avalue2：存放模板字面量中的第二个变量。如例子中，存放了变量b
当然，这种写法也可以使函数返回结果
function display(stringArr, value1, value2) {console.log(stringArr);console.log(value1);console.log(value2);return "ok";}var result = display`Hello！ ${a} and ${b}`;console.log(result); 结果如下：
三.标签模板的应用——过滤HTML字符串，防止用户输入恶意内容 （XSS攻击）
先贴代码
function SaferHTML(templateData) {let s = templateData[0];for(let i = 1 ; i < arguments.length ; i++){ let arg = String(arguments[i]); s += arg.replace(/&/g,"&").replace(//g,">"); s += templateData[i];}return s;}var sender = '';var message = SaferHTML`这里面可能有恶意代码，比如${sender}
`; 假如你是一个社交网站的用户，你发现发帖子时可以嵌入js脚本的漏洞，于是在内容里写入了一段恶意代码（比如死循环致浏览器未响应或者无限弹出广告），如果这篇帖子被发布并且吸引了很多人，后果可想而知。
如果我们对要上传至服务器的内容先进行过滤，则可能可以防止这种情况发生。