掘金 后端 ( ) • 2024-04-16 18:01

在比较新的Javascript版本中,提供了一项和字符串处理相关的特性,名为Template literals (Template strings),就是模板文字或者模板字符串,作者觉得这个特性比较有趣,在很多场景下也是比较实用的,遂著文记述讨论。

定义

根据MDN技术文档的定义,模板文字指的是用反引号(`) 字符分隔的文字。这种文字表达的方式,可以支持多行字符串、带有嵌入表达式的字符串插值以及称为标记模板的特殊构造。从而使简单的字符串结构,可以适应更丰富和灵活的业务场景。

为了方便理解,我们可以先来看看一些模板文字的实例:


`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`


从定义信息和示例代码来看,模板文字特性和技术包括以下三个要点:模板文字,表达式和标记方法。下面我们结合示例代码一一拆解说明。

template literal 模板文字

在JS语言包括绝大多数编程语言中,使用普通字符串表达使用单引号或者双引号来进行标记不同,模板文字(有时也译做模板字面量)使用反引号这个有点冷门的符号来进行标记,这一设计,应该是基于减少对现有应用编码模式的干扰和冲击的考虑。

模板文字的一个重要的优点,在于对自然换行文本的支持,可以以非常自然的方式进行编码和表达。如果不是如此,我们可能需要引入如 "\n" 这种比较突兀的转义符,并且可能需要进行字符串连接操作。比如Java语言中,就需要使用"+"符号或者StringBuild类进行字符串连接,才能正常的表达和处理完整的带有换行的字符串的内容。

很多IDE也能够很好的支持模板文字,并且其他的显示方式,来呈现模板文字。帮助开发者能够快速正确的识别这些内容(下图)。

01.png

express 表达式

其实对于模板文字技术而言,前面提到的支持原生换行文字的特性,只能算是一种附加收益。模板文字技术的精髓在于文本的“模板化”。就是这段文字内容的主要目的是提供一个大体的“模板框架”,其中部分内容是可以被方便的修改和替换的。如果这个替换的部分,使用一些变量或者表达式,就可以方便的控制输出可变的文本内容。所以,模板文字必须提供这种支持变量和表达式的方式。

JS的模板文字,约定使用${}符号来支持变量和表达式。开发者可以在其中使用变量,也可以直接使用表达式,非常方便和灵活。

tagFunction 标记方法(tagFunction)

MDN中将标记方法看成模板文字的的一个更高级的形式。它允许用户使用一个命名函数解析来解析模板文字。该函数的第一个参数模板文字的内容字符串,其他参数作为外部变量用于额外的解析处理。然后,标记函数可以对这些参数执行期望的任何操作,并返回操作后的字符串。

对于这个特性,笔者的看法其实是有一些保留的。一是觉得没有太大的必要,二是觉得实现方式有点怪异,三是觉得有点破坏针对字符串的纯粹性和简洁性。

简单而言,这个特性就是指,可以为模板文字定义一个处理方法,并结合模板文字使用,就可以返回对应的处理结果。更重要的是,标记方法不使用标准的方法调用方式,而是直接作为前缀放在模板文字前面。这也是刚接触时,笔者感觉不太适应的原因,因为它破坏了JS方法调用的一般范式。

下面的代码示例,应当可以帮助我们来理解标记方法的工作方式:

const person = "Mike";
const age = 28;

function myTag(strings, personExp, ageExp) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "
  const str2 = strings[2]; // "."

  const ageStr = ageExp < 100 ? "youngster" : "centenarian";

  // We can even return a string built using a template literal
  return `${str0}${personExp}${str1}${ageStr}${str2}`;
}

const output = myTag`That ${person} is a ${age}.`;

console.log(output);
// That Mike is a youngster.


这里有一些要点,需要开发者在使用这一特性之前,进行很好的理解和掌握:

  • 在和其他方法或者符号不冲突的情况下,标记方法名称没有什么特别的限制
  • 标记方法的第一个参数是一个字符串数组,它来自对于模板文字的自动解析
  • 模板文字解析的方式是使用表达式符号进行切分
  • 标记方法的其他参数,是使用标记方法时,注入的表达式的内容,顺序是它们在模板文本中的顺序
  • 调用时,直接连接标记方法名称和模板文字,程序会生成并返回处理后的结果

应用场景和优势

笔者在开发过程中,对于模板文字的使用还是比较常见的。比如定义很多SQL语句模板的时候。有些SQL语句比较长,合理的换行可以使内容和结构更加清晰,增强可读性和可维护性,而且使用模板和变量,可以减少编码中的拼写错误。这些都是模板文字的典型场景和优势所在。

小结

本文我们探讨了Javascript语言中一个有趣而实用的特性:模板文本。分析了理解此技术的三个主要概念和要点,并提供了一些简单的代码和示例来帮助理解。最后总结了笔者的一些使用场景和经验,以及对其收益、优势和问题的理解。