JavaScript 字面量模板(Template Literals)指南 – JavaScript 完全手册(2018版)

栏目: JavaScript · 发布时间: 5年前

内容简介:小编推荐:

JavaScript 字面量模板(Template Literals)指南 – JavaScript 完全手册(2018版)

JavaScript 字面量模板(Template Literals)指南 – JavaScript 完全手册(2018版)

小编推荐: 掘金是一个面向 程序员 的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第16节,你可以查看该手册的完整目录。

在ES2015(又名ES6)中引入,字面量模板提供了一种声明字符串的新方法,但也提供了一些已经广泛流行的新有趣的结构。

字面量模板简介

字面量模板是 ES2015 / ES6 的新功能,与 ES5 及更低版本相比,它允许您以新颖的方式处理字符串。

乍一看语法非常简单,只需使用反引号而不是单引号或双引号:

const a_string = `something`

它们是独特的,因为它们提供了许多用引号构建的普通字符串所特有的特性:

  • 它们提供了很好的语法来定义多行字符串
  • 它们提供了一种在字符串中插入变量和表达式的简便方法
  • 他们允许使用模板标签创建DSL

让我们详细了解一下每个特性。

多行字符串

在 ES6 之前,要创建一个跨越两行的字符串,您必须在一行的末尾使用 \ 字符:

const string = 'first line\n \
second line'

或者

const string = 'first line\n' +
               'second line'

字面量模板使多行字符串更加简单。

使用反引号打开字面量模板后,只需按 Enter 键即可创建一个没有特殊字符的新行,并按原样渲染:

const string = `Hey
this

string
is awesome!`

请记住,空格是有意义的,所以这样做:

const string = `First
                Second`

上面的代码将创建一个这样的字符串:

First
                Second

解决这个问题的一个简单方法是使第一行空掉,并在关闭反引号后立即跟随 trim() 方法,这将消除第一个字符前的任何空格:

const string = `
First
Second`.trim()

插值

模板标签是一种乍听起来可能不太有用的特性,但实际上它被许多流行的库所使用,比如 Styled Components 或Apollo ,GraphQL 客户端/服务器库,因此了解它是如何工作的必不可少。

在 Styled Components 模板标签中用于定义CSS字符串:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`;

在Apollo中,模板标签用于定义 GraphQL 查询模式:

const query = gql`
  query {
    ...
  }
`

这些示例中 styled.buttongql 模板标签只是 函数

function gql(literals, ...expressions) {
}

这个函数返回一个字符串,这个字符串可以是任何类型计算的结果。

literals 是一个数组,包含由表达式插值标记的字面量模板内容。

expressions 包含所有插值。

如果我们举一个上面的例子:

const string = `something ${1 + 2 + 3}`

literals 是一个包含两个项的数组。 第一个是 something ,直到第一个插值的字符串,第二个是空字符串,第一个插值的结尾(我们只有一个)和字符串的结尾之间的空格。

在这种情况下, expressions 是一个包含单个项元素的数组, 6

一个更复杂的例子是:

const string = `something
another ${'x'}
new line ${1 + 2 + 3}
test`

在这种情况下, literals 是一个数组,其中第一项是:

something
another `

第二个是:

new line `

第三个是:

test`

在这种情况下, expressions 是一个包含两个项 x6 的数组。

传递这些值的函数可以用这些值做任何事情,这就是这种特性的强大之处。

最简单的例子是通过简单地连接 literalsexpressions 来复制字符串插值的作用:

const interpolated = interpolate`I paid ${10}€`

这就是 interpolate 的工作原理:

function interpolate(literals, ...expressions) {
  let string = ``
  for (const [i, val] of expressions) {
    string += literals[i] + val
  }
  string += literals[literals.length - 1]
  return string
}

如果你觉得本文对你有帮助,那就请分享给更多的朋友

关注「前端干货精选」加星星,每天都能获取前端干货

JavaScript 字面量模板(Template Literals)指南 – JavaScript 完全手册(2018版)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

人工智能

人工智能

Peter Norvig、Stuart Russell / 姜哲 / 人民邮电出版社 / 2004-6 / 85.00元

《人工智能:一种现代方法》(第2版中文版)以详尽和丰富的资料,从理性智能体的角度,全面阐述了人工智能领域的核心内容,并深入介绍了各个主要的研究方向,是一本难得的综合性教材。全书分为八大部分:第一部分“人工智能” ,第二部分“问题求解” ,第三部分“ 知识与推理” ,第四部分“规划” ,第五部分“不确定知识与推理” ,第六部分“学习” ,第七部分“通讯、感知与行动” ,第八部分“ 结论” 。一起来看看 《人工智能》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试