ES6 模板字符串/标签模板

• 模板字符串中的换行

//转义
`In JavaScript \n is a line-feed.`

//直接换行
`In JavaScript 
is a line-feed.`

//在换行前加上反斜线以转义换行，这样反斜线和换行都不会出现在字符串的值中。
//（译注：实际上就是一条语句拆成多行书写）
var str = "this string \
is broken \
across multiple\
lines."
//result：this string is broken across multiplelines.

• 标签模板

//在模板字符串前添加一个tag函数可以自定义模板字符串的解析过程，这可用来防止注入攻击
//或者用来建立基于字符串的高级数据抽象,称之为标签模板,tag函数以是随意命令。
let author = '文森特・梵高'
let message = tag`不要吹灭${"你的灵感和你的想象力"}; 不要成为${"你的模型"}的奴隶。——${author}!`;
function tag(strArr, ...variables) {
    console.log(stringArr); 
    //["不要吹灭", "; 不要成为", "的奴隶。——", "!"]
    console.log(variables);     
    //["你的灵感和你的想象力", "你的模型", "文森特・梵高"]
    return "custom text";	//返回值即作为message的值
}

//如何防止XSS攻击？在tag函数中过滤某些用户输入的恶意代码并转为普通字符串
var message =  filterHTML`<p>${sender}你好啊</p>`;
function filterHTML(templateData,...variables) {
  var s = templateData[0];
  for (var i = 0; i < variables.length; i++) {
    var insertVar = String(variables[i]);
    // 转义占位符中的特殊字符。
    s += insertVar.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");
    // 不转义模板中的特殊字符。
    s += templateData[i+1];
  }
  return s;
}
var sender = '<script>alert(document.cookie)</script>'; // bad code
var message = filterHTML`<p>${sender} 你好啊</p>`;
console.log(message);
// <p>&lt;script&gt;alert("买了个包")&lt;/script&gt;  你好啊</p>