JS模板文字技术探讨

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

定义

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

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

js 复制代码

`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也能够很好的支持模板文字，并且其他的显示方式，来呈现模板文字。帮助开发者能够快速正确的识别这些内容(下图)。

express 表达式

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

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

tagFunction 标记方法(tagFunction)

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

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

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

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

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