这是我参与11月更文挑战的第6天,活动详情查看:2021最后一次更文挑战
模板字符串
ES2015的标准增加了:Template Strings即模板字符串,这篇文章我们就来了解一下什么是模板字符串。
模板字符串使用反引号,如下:
` `
它的主要作用是:代替普通字符串中的用双引号和单引号。
模板字符串可以结合语法占位符(${expression})来使用。${}中的表达式和周围的文本会一起传递给一个默认函数,该函数的功能就是:把所有的信息拼接在一起。
模板字符串的表达式可以是变量,也可以说是三元运算,也可以是一个函数。通常我们在项目中会把想拼接的值定义为一个变量,至于这个值是通过函数,还是其他运算得到的我们会根据当时的场景做判断,而在拼接的时候我们只要这样写:
const value = 函数返回值 或 其他运算
`${value}`
如何使用
单行字符串
如果是单行字符串,使用如下:
const name = `也笑`
多行字符串
如果是多行字符串,使用如下:
const user = `也笑
身高:183cm
年龄:812
`
console.log(user);
输入结果如下:
也笑
身高:183cm
年龄:812
嵌套模板
嵌套模板${}使我们更好的拼接字符串,使用如下:
const name = '也笑'
const user = `姓名:${name}`
console.log(user); // 姓名:也笑
注意事项
我们需要注意的是:在模版字符串内使用反引号时,需要在它前面加转义符(\),如下:
const name = `也笑\`slifree`
console.log(name); // 也笑`slifree
总结
在项目中我们可以用模板字符串处理一些事情,如下:
字符串拼接dom节点拼接拼接动态的css样式- 等等
模板字符串结合
${}拼接,可以让我们的代码更简洁,它比原先的+拼接更加的方便。
如果你想了解ES的其他特性,请移步到 ES2015+碎片化学习,每天都在向前走一步,这是所有文章的目录入口。