模板字符串是ES6添加的一个新的字符串编写形式             。

1.【模板字符串】之拼接

在ES6之前
  
  
  
  
  
  
 ，如果我们想要将字符串和一些动态的变量拼接到一起  
  
  
  
  
  
 ，是很麻烦的
  
 
  
 
  
 
  
 
  
 
  
 
  。

const name = "aaa" const age = 18 console.log("my name is "+name+".Im "+age+" years old")

需要添加多个+（加号）
 


 


 


 


 


 


 
，非常麻烦












。

在ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接 
  
  
  
  
  
  
。用``符号编写的字符串
 
 
 
 
 
 
，称为模板字符串
  
  
  
  
  
  
 。

在模板字符串中   
   
   
   
   
   
  ，我们可以通过反引号``内编写${变量}的形式将字符串和动态的变量拼接到一起
 


 


 


 


 


 


 。

const name = "aaa" const age = 18 console.log(`my name is ${name}.Im ${age} years old`) //my name is aaa.Im 18 years old

这样编写不仅更方便
 

 

 

 

 

 

 
，代码还有更好的可读性 
 
 
 
 
 
 
。

2.【模板字符串】之换行

使用单引号或者双引号编写字符串

 

 

 

 

 

 
，如果内容过多              ，一行装不下的时候
   
   
   
   
   
   
 。需要将字符串分割成几个部分
 
 

 
 

 
 

 
 

 
 

 
 

 
，使用+（加号）进行拼接
 

 

 

 

 

 

 。

const name = "aaa" const age = 18 console.log("my name is" +"name")

如果使用模板字符串就没有这样的烦恼 

 

 

 

 

 

 
。

const name = "aaa" const age = 18 console.log(`my name is name`)

不需要将字符串分割成几部分用+拼接             。

3.【模板字符串】之标签模板字符串

如果我们在调用一个函数的时候不使用()来调用












，并且传入其他的变量

function foo (...args){ console.log(args) } const name = "aaa" const age = 18 foo`Hello ${name} World ${age}`

foo`Hello ${name} World ${age}`也是可以调用函数的

 
 

 
 

 
 

 
 

 
 

 
 

 。 

函数可以获取到参数












。

第一个元素是数组                    ，是被模块字符串拆分的字符串组合； 后面的元素是一个个模块字符串传入的内容