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

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

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

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

需要添加多个+(加号),非常麻烦。

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

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

const name = "aaa"
const age = 18
console.log(`my name is ${name}.I'm ${age} years old`) //my name is aaa.I'm 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}`也是可以调用函数的。 

函数可以获取到参数。

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

模板字符串基本使用

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。