发布时间:2023-05-22 文章分类:WEB开发, 电脑百科 投稿人:赵颖 字号: 默认 | | 超大 打印

模板字符串是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}`也是可以调用函数的。 

函数可以获取到参数。

模板字符串基本使用