模板字符串的用法

模板字符串

可以包含特定语法（$ {expression}）的占位符。. 占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你都可以通过该函数来对模板字符串进行操作处理。. 在模版字符串内使用反引号（`）时，需要在它前面加转义符（）。. ``` === "`".

示例

<script>
   let user = {
     name: "Chance",
     city : "Beijing",
};
let vm = new Vue({
   el: '#app',
   data: user,
   methods:{
      sayHello(){
         return '您好,欢迎来自 ${this.city} 的 ${this.name} !'
      }
   }
})
</script>

请注意这里构造欢迎的字符串，使用的也是ES6新增的一种语法结构，称为“字符串模版”，它以·“`”符号开头和结尾，代替了普通字符串开头和结尾的单引号或双引号。在这种字符串模板中，可以方便地插入变量，例如，下面两条语句分别是ES6和ES5的写法，二者是等价的，但显然ES6的写法更方便且更易于理解

//ES6
let hello = '欢迎来自 ${this.city} 的 ${this.name} !';

//ES5
let hello = "欢迎来自" + this.city + "的" + this,name " ! ";

使用模板字符串的另一个优点是，可以跨行，直接产生多行文本；而普通字符串不能跨行，如果要定义多行字符串，那么必须通过将多个单行字符串拼接才能获得。