正常使用js的数据放入页面的时候需要自己手动拼接字符串的,现在es6提供了一种模板字符串解决了这个问题
模板字符串( template string )是增强版的字符串,用反引号( ` )标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
ps:反引号别告诉我不知道是啥,键盘一左边的按键
是不是很赞!!!!
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
这样就会循环的生成了一个列表,es6是不是太赞了
但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。
模板字符串( template string )是增强版的字符串,用反引号( ` )标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
ps:反引号别告诉我不知道是啥,键盘一左边的按键
在里面的变量写法不用再拼接了,只需要用${}来划定范围就行了,大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性、
let bianliang = 1111;
console.log(`输出的会是 ${bianliang}`);
输出结果:输出的会是 1111
是不是很赞!!!!
如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。
然后看看更带劲的,模板编译
var template = `
<ul>
<% for(var i=0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>
`;
上面代码在模板字符串之中,放置了一个常规模板。该模板使用<%...%>放置 JavaScript 代码,使用<%= ... %>输出 JavaScript 表达式。
这样就会循环的生成了一个列表,es6是不是太赞了
标签模板
模板字符串的功能,不仅仅是上面这些。它可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为 “ 标签模板 ” 功能( tagged template )。
alert`123`
// 等同于
alert(123)
标签模板其实不是模板,而是函数调用的一种特殊形式。 “ 标签 ” 指的就是函数,紧跟在后面的模板字符串就是它的参数。
但是,如果模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。