SE6 模板字符串详解

SE6引入了模板字符串这样一个概念，让我们从无止尽的+连接字符串中解脱了出来，SE5中也可以在字符串末尾添加\实现，不过模板字符串更加好用和强大。

SE6模板字符串是用反撇号（`，即键盘上和~键同一个键）括起来的字符串。支持字符串插值${express}

$("#btn").html(`
	<div>javaScript 6</div>
	<div>2015年由${name}引入</div>
	`);

使用说明：

• • 占位符${}中的代码可以是任意javascript表达式，如函数调用、算术运算，甚至是另一个模板字符串。
  • 占位符的输出会被转变为字符串，如果是对象则调用它的tostring()方法。
  • 不会自动转义特殊字符，如引入`,$,{,}需要用\转义，易引起注入攻击。

注意事项：

• • 不会自动转义特殊字符，如引入`,$,{,}需要用\转义，易引起注入攻击。
  • 无法很好与国际化库很好的配合，也无法格式化特定语言的数字和日期。
  • 没有内建循环语法，所以无法通过类似数组遍历来构建HTML表格。
  • 不支持条件语句。

模板高级特性---标签模板

标签模板就是在模板字符串前引入一个标签，这个标签是一个用于处理模板字符串的函数，变量获得最终值就是这个函数的返回值，可以用来处理代码注入的一类的问题。

标签函数接收多个参数

1. 1. 第一个参数是是一个数组，元素就是被占位符分隔开的原生字符串。
   2. 后面的参数就是占位符替换成功之后的字符串。

var name = 'Jhon';
var school = 'haval';
study`姓名：${name}学校：${school}`

study第一个参数就是['姓名：','学校：']，第二个参数为‘Jhon’，第三个参数为‘haval’，依次类推，实例如下：

function SaferHTML(templateData) {
  var s = templateData[0];
  for (var i = 1; i < arguments.length; i++) {
    var arg = String(arguments[i]);
    // Escape special characters in the substitution.
    s += arg.replace(/&/g, "&")
            .replace(/</g, "<")
            .replace(/>/g, ">");
    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}
// 调用
var html = SaferHTML`<p>这是关于字符串模板的介绍</p>`;

代码说明：转义占位符字符串，即从第二个参数开始的所有参数；返回转义后的字符串。