Vue基础教程（19）ECMAScript 6语法模板字面量之字符串占位符：别再傻傻拼接字符串了！Vue+ES6模板字面量，让你的代码像德芙一样丝滑

嘿，屏幕前的你！对，就是你，那个在Vue组件里写字符串写到手指抽筋的靓仔/靓女！是不是经常遇到这种让人头皮发麻的代码？

const name = "阿伟";
const hobby = "在王者峡谷刷步数";
const sentence = "大家好，我是" + name + "，我的爱好是" + hobby + "。";
console.log(sentence); // 大家好，我是阿伟，我的爱好是在王者峡谷刷步数。

我的天呐！一堆加号，一堆引号，眼花缭乱不说，还特别容易出错。万一hobby是undefined，整个句子就直接裂开。这种写法，我们称之为“字符串拼接の青铜时代”。

但今天，我要带你坐上ECMAScript 6的火箭，飞向“模板字面量の王者峡谷”！这玩意儿，说白了就是给字符串开了个VIP外挂。

第一章：基础入门——这玩意儿到底是啥？

模板字面量，名字听着高大上，其实特简单。它不用单引号''也不用双引号""，而是用反引号包裹字符串，就是键盘上ESC下面那个小可爱：`。

它的第一个爽点：可以直接换行！ 写多行字符串再也不用\n或者+了。

青铜写法（看着都累）：

const poem = "床前明月光，\n" +
             "疑是地上霜。\n" +
             "举头望明月，\n" +
             "低头思故乡。";

王者写法（一目了然）：

const poem = `床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。`; // 直接回车换行，舒服！

但这还不是最牛的，最核心的魔法是——字符串占位符！

第二章：灵魂所在——${}占位符，请开始你的表演！

占位符，顾名思义，就是在字符串里占个坑，然后往坑里填变量或者表达式。语法就是${这里填任何有效的JavaScript表达式}。

咱们把开头的例子改造一下：

const name = "阿伟";
const hobby = "在王者峡谷刷步数";
const sentence = `大家好，我是${name}，我的爱好是${hobby}。`;
console.log(sentence); //