ES2015入门系列7-模版字符串

说到 模版字符串 (Template strings or Template literals), 我们先来看看在ES5中,我们遇到的问题:

假设我们需要拼接一段html字符串,常规的做法如下:

1
2
3
4
5
6
var text = 'ES5 sucks!';
var html = '\
<div> \
<p>' + text + '</p>\
</div>';

console.log(html);

或者:

1
2
3
4
5
6
7
var text = 'ES5 sucks!';
var html = [
'<div>',
'<p>' + text + '</p>',
'</div>'
].join('');
console.log(html);

写的很难受对不对?到了ES2015, 有了 模版字符串 后,事情就变得简单了。

模版字符串,就是用 `` 包裹起来的字符串, 如:

1
2
3
4
5
6
let html = `
<div>
<p>ES5 sucks!</p>
</div>
`;

console.log(html);

在其中,我们还可以使用 ${变量名}, 直接引用变量,而不用字符串拼接了,如:

1
2
3
4
5
6
7
let text = 'ES5 sucks!';
let html = `
<div>
<p>${text}</p>
</div>
`;

console.log(html);

如果不想其中的字符被转译,比如保留换行字符等,可以使用 String.raw, 如:

1
2
console.log(`我是\n两行`);
console.log(String.raw`我是\n一行`);

输出:

1
2
3
> 我是
> 两行
> 我是\n一行
本文使用「CC BY 4.0」创作共享协议,只要在使用时署名,您可以对本文进行转载、节选、混编、二次创作,并允许商业性使用。
本文为作者原创,如果您认为本文对您有帮助,欢迎打赏作者