关于es6模板字符串的学习...

``模板字符串是es6中新增的增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
`In Javascript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
not legal`

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

模板字符串除了以上基础用法外，大括号内可以放入任意的Javascript表达式，可以进行运算，以及引用对象属性。

var x = 1;
var y = 1;

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

var obj = {x: 1, y: 2}
`${obj.x + obj.y}`
// 3

模板字符串还能调用函数。

function fn() {
  return "Hello World";
}

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

如果大括号中的值不是字符串，将按一般的规则转为字符串。

以上是模板字符串的基础用法。。。其实。。。

接下来。。。。重点来了，其实我只是想记录学习一下标签模板

标签模板：当模板字符串紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串，这个功能就叫做标签模板。标签模板其实不是模板，而是函数调用的一种特殊形式。

alert`123`
等同于
alert(123)

但是， 如果模板字符中有变量，就不再是简单的调用了， 而是要将模板字符串先处理成多个参数，再调用函数。

先看一个例子。

var total = 30;
var msg = tag `The total is ${total} (${total*1.05} with tax)`;

function tag(literals, ...value) {  
    console.log(literals)  
    console.log(...value)
    return 'ok'
}
// [ 'The total is ', ' (', ' with tax)' ]
// 30 31.5

console.log(msg)
// ok

tag函数的第一个参数是一个数组，该数组的成员是模板字符串中那些没有变量替换的部分，也就是说，变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间，以此类推。

tag函数的其他参数都是模板字符串各个变量被替换后的值。

下面看一个更复杂的例子。

var total = 30;
var msg = passthru `The total is ${total} (${total*1.05} with tax)`;

function passthru(literals) {  
    var result = ''
    var i = 0
    
    while(i < literals.length) {
        result += literals[i++];
        if(i < arguments.length) {
          result += arguments.length;
        }
    }
    return result;
}

msg  // The total is 30 (31.5 with tax)

上面这个例子展示了如何将各个参数按照原来的位置拼接回去。

‘标签模板’的一个重要应用就是过滤HTML字符串，防止用户输入恶意内容。

var sender = "<script>alert('abc')</script>";
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])    
    s += arg.replace(/&/g, "&amp;")      
        .replace(/</g, "&lt;")      
        .replace(/>/g, "&gt;")    
    s += templateData[i]  
  }  
    return s
}
console.log(message)
// <p>&lt;script&gt;alert('abc')&lt;/script&gt; has sent you a message .</p>

以上是今天的字符串模板学习，参考：阮一峰老师的《ES6标准入门》（第三版）