Javascript模板字符串

-

模板字符串(ES6)

背景

• 在之前我们使用JavaScript输出模板字符串(字符串拼接)，通常是下面这样：

  var name="时光路人"；
  var age="13";
  var str="He is"+name+"and we wish to know his"+age;
  

  • 这样传统的做法需要使用大量的""(双引号/单引号)和+来拼接才能得到我们所需要的模板

基本使用

语法：

• 在ES6中提供了模板字符串，用 ` (反引号)标识，用 ${}将变量括起来：上面的例子可以写成下面这样：

  var name="时光路人"；
  var age="13";
  var str=`He is ${name} and we wish to know his ${age}`;
  

• 这种做法就简洁了很多，不需再使用大量的“”/''和+来拼接字符串和变量；

• 模版字符串可以引入变量，不使用变量也是可以的

使用实例

• 在使用中如果需要在字符串中使用反引号，就需对其进行转义(原因：反引号是模板字符串的标识)，如下所示

  var str=`NO problem\` what you do`;//使用 \ 将其转义
  

• 使用模板字符串表示多行字符串，所有的空格和缩进都会保存在输出中

  //ES5使用转义字符换行
  alert("do you do \n want");
  //ES6
  alert(`do you do
        want`)
  //输出结果相同
  

• 在${}中的大括号里可以放入任意的JavaScript表达式，还可以进行运算，以及引用对象属性

      var x=88;
      var y=100;
      console.log(`x=${++x},y=${x+y}`);
  

• 模版字符串还可以调用函数

  function string(){
      return "zzw likes es6!";
  }
  console.log(`${string()}`);//输出：zzw likes es6!
  

• 如果函数的结果不是字符串，那么，将按照一般的规则转化为字符串

• 模板字符串可以进行嵌套