ES6模版字符串的用法

前言

早些年的数据交互通常是用模板引擎或是拼字符串的方式 输出模板，这种方案相当繁琐而不方便，ES6引入了 模板字符串来解决这个问题。

模板字符串（template string）

概念： 模板字符串是增强板的字符串， 用反引号（ ` ）标识，
用途：
1、当作普通字符串使用
2、定义多行字符串
3、在字符串中嵌入变量

基本用法

//、当作普通字符串使用
`In JavaScript '\n' is a line-feed.`

//、定义多行字符串
`In JavaScript this is
 not legal.`
console.log(`string text line 1
string text line 2`);

//、在字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

**注意：
1、因为模板字符串是用反引号（  `  ）标识，
所以如果在模板字符串中需要使用反引号，需要在前面用反斜杠转译
 `yo`world
  var str=`\`yo\`world\
2、如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出中
3、在模板字符串中嵌入变量，需要将变量名写在${}中
     `Hello ${name}, how are you ${time}?`
4、在${}中，可以放入任意的javascript表达式，可以进行运算，以及引用对象属性
   var x = 1;
   var y = 2;

   `${x} + ${y} = ${x + y}`
   // "1 + 2 = 3"

   `${x} + ${y * 2} = ${x + y * 2}`
   // "1 + 4 = 5"

   var obj = {x: 1, y: 2};
   `${obj.x + obj.y}`
   // 3
5、模板字符串中还可以调用函数
  function fn() {
     return "Hello World";
   }

  `foo ${fn()} bar`
  // foo Hello World bar

标签模板

模板字符串可以紧跟在一个函数名后面，该函数将被调用 来处理这个模板字符串。这被称之为 “标签模板” 功能。
用途：
过滤html 字符串，防止用户故意输入恶意内容。

var message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;

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;
}

上面代码中，sender变量往往是用户提供的，经过SaferHTML函数处理，里面的特殊字符都会被转义。