ES2015之模板字符串

276 阅读1分钟

这是我参与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

总结

在项目中我们可以用模板字符串处理一些事情,如下:

  1. 字符串拼接
  2. dom节点拼接
  3. 拼接动态的css样式
  4. 等等 模板字符串结合${}拼接,可以让我们的代码更简洁,它比原先的 + 拼接更加的方便。

如果你想了解ES的其他特性,请移步到 ES2015+碎片化学习,每天都在向前走一步,这是所有文章的目录入口。