ES6总结(二)：模板字符串

一、基础用法

1、传统：

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

2、ES6

$("#result").append(
	`He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`
);

注意：

• 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
• 模板字符串中还可以嵌套另一个模板字符串。如：

//嵌套模板字符串
const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

二、模板翻译

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

上面代码在模板字符串之中，放置了一个常规模板。
该模板使用<%…%>放置 JavaScript 代码，使用<%= … %>输出 JavaScript 表达式。
这样就会循环的生成了一个列表。

三、 {}里面可以插入任何js表达式，可以是一个对象、数组，甚至是一个函数。

对象或数组会调用它们的tostring()方法
对象

//对象
var obj = {a:1,b:2};
`xxx ${obj} xxx`//xxx [object Object] xxx

数组

//数组
var arr = [1,2,3];
`xxx ${arr} xxx`//xxx 1,2,3 xxx

函数
分两种情况：

1. 函数本身，同样会调用它的tostring()方法
2. 直接调用函数，则输出函数的返回值

var fn1 = function(){
console.log('hello vuex');
}
var fn2 = function(){
return 'hello vue-router'
}
`xxx ${fn1}`//xxx function fn(){....}
`xxx ${fn1()}`//xxx underfind
`xxx ${fn2()}`//xxx hello vue-router

四、标签模板

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为 “ 标签模板 ” 功能（ tagged template ）。

alert`123`
//  等同于
alert(123)

标签模板其实不是模板，而是函数调用的一种特殊形式。 “ 标签 ” 指的就是函数，紧跟在后面的模板字符串就是它的参数。
但是，如果模板字符里面有变量，就不是简单的调用了，而是会将模板字符串先处理成多个参数，再调用函数。