ES6模板

什么是模板字符串

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

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

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

console.log(`string text line 1
string text line 2`);

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

trim

去除空格和换行,
可以当作普通字符串使用

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`.trim());

${}

1. 模板字符串中嵌入变量，需要将变量名写在${}之中。
2. ${}中变量没有声明就会报错。
3. ${}内部是一个字符串，将会原样输出。

function authorize(user, action) {
  if (!user.hasPrivilege(action)) {
    throw new Error(
      // 传统写法为
      // 'User '
      // + user.name
      // + ' is not authorized to do '
      // + action
      // + '.'
      `User ${user.name} is not authorized to do ${action}.`);
  }
}

${fn()}调用函数

function fn() {
  return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World bar

模板编译

<%…%>

<%…%>放置 JavaScript 代码，使用<%= … %>输出 JavaScript 表达式。

let template = `
<ul>
  <% for(let i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>`;

模板标签

标签模板其实不是模板，而是函数调用的一种特殊形式。
“标签”指的就是函数，紧跟在后面的模板字符串就是它的参数。

{
	let a = 5;
	let b = 10;
	//模板字符串
	let c = `Hello ${ a + b } world ${ a * b }`
	//标签模板，tag函数
	//如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。
	//等同于tag(['Hello ', ' world ', ''], 15, 50);
	//第一个参数['Hello ', ' world ', ''],既所有非${}的值
	//第一个参数数组长度为所有${}的长度+1,
	//之后的参数为${ a + b }的计算结果
	tag`Hello ${ a + b } world ${ a * b }`;
	function tag(...values){
	  console.log(...values)//["Hello ", " world ", ""] 15 50
	}
	console.log(c) //Hello 15 world 50
}

//示例2
{
    let total = 30;
    let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
	//passthru`The total is ${total} (${total*1.05} with tax)`;
	//参数值为：["The total is ", " (", " with tax)"]30, 31.5
	//literals,第一个参数值
    function passthru(literals) {
      console.log(literals)
      //所以literals为["The total is ", " (", " with tax)", raw: Array(3)]
      let result = '';
      let i = 0;

      while (i < literals.length) {
        result += literals[i++];//i++ 这里增加
        //arguments为 ["The total is ", " (", " with tax)", raw: Array(3)]30, 31.5
        if (i < arguments.length) {
          console.log(arguments,i)
          //i 为 1 值为30
          //i 为 2 值为31.5
          result += arguments[i];
        }
      }

      return result;
    }
    msg//"The total is 30 (31.5 with tax)"
}

//示例3
{
	function passthru(literals, ...values) {
	//literals：["The total is ", " (", " with tax)"]
	//values：[30, 31.5]
    	let output = "";
    	let index;
    	for (index = 0; index < values.length; index++) {
    		output += literals[index] + values[index];
    	}
    	//最后一个赋值
    	output += literals[index]
    	return output;
    };
	let total = 30;
	passthru`The total is ${total} (${total*1.05} with tax)`
	}

防止用户输入恶意内容

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

function SaferHTML(templateData) {
	//初始值设置
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
    let arg = String(arguments[i]);
    //用正则替换
    s += arg.replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;");

    // Don't escape special characters in the template.
    s += templateData[i];
  }
  return s;
}
let sender = '<script>alert("abc")</script>'; // 恶意代码
let message = SaferHTML`<p>${sender} has sent you a message.</p>`;
message
// <p>&lt;script&gt;alert("abc")&lt;/script&gt; has sent you a message.</p>