一、基础用法
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
函数
分两种情况:
- 函数本身,同样会调用它的tostring()方法
- 直接调用函数,则输出函数的返回值
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)
标签模板其实不是模板,而是函数调用的一种特殊形式。 “ 标签 ” 指的就是函数,紧跟在后面的模板字符串就是它的参数。
但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。