ES6标记模板文字

by Sanket Meghani

通过Sanket Meghani

ES6标记模板文字 (ES6 Tagged Template Literals)

You may already be familiar with ES6 template literals, which allows string interpolation like this:

您可能已经熟悉ES6模板文字，它允许像这样进行字符串插值：

const name = 'Steve';const message = `Hello ${name}!`;

console.log(message); // Output -> Hello Steve!

ES6 also introduced a more advanced and powerful concept of Tagged Template Literals. A tag is a function which has ability to interpret & process the template. This means we can run the template string through a function and have more control over how the template is converted to string representation.

ES6还引入了更高级和更强大的标记模板文字概念。 标签是一种具有解释和处理模板功能的功能。 这意味着我们可以通过一个函数运行模板字符串，并且可以更好地控制模板如何转换为字符串表示形式。

Tags are just normal functions, but to be useful they have to be invoked differently. Following example shows how a tag is defined and invoked:

标签只是正常功能，但要使用它们，必须以不同的方式调用它们。 以下示例显示了如何定义和调用标签：

Tag needs to be invoked by passing a template literal without using brackets as shown in line 9 above.

标签需要通过传递模板文字来调用，而无需使用括号，如上面的第9行所示。

The template literal is passed to tag function as multiple parameters. The first argument is a string array containing string literals from the template: First element in the array is string starting from index 0 to the first interpolated value, second element in the array is string after first interpolated value up-to next interpolation and so on until end of template is reached.

模板文字作为多个参数传递给标签函数。 第一个参数是一个字符串数组，其中包含模板中的字符串文字：数组中的第一个元素是从索引0到第一个内插值的字符串，数组中的第二个元素是第一个内插值之后到下一个插值的字符串，依此类推直到到达模板末尾。

All the interpolated expressions are evaluated and passed to the tag as second argument on-wards in order of their occurrence. The tag can process the literals and evaluated expressions to form the return value.

所有插值表达式都会被评估并按其出现顺序依次作为第二个参数传递给标签。 标签可以处理文字和评估表达式以形成返回值。

是什么使其功能强大？ (What makes it powerful?)

The obvious question is: how is this more powerful than normal template literals?

显而易见的问题是：这比普通模板文字更强大吗？

All the interpolated expressions are evaluated and passed to the tag as second argument on-wards…

所有插值表达式都会被求值并作为第二个参数传递给标签。

This allows us to use function expressions as interpolated values which can be called back. Let’s take an example to make it more clearer.

这使我们可以将函数表达式用作可回调的内插值。 让我们以一个例子来使其更加清晰。

When the interpolation contains a function expression, it is evaluated as normal string in case of normal template literals.

当插值包含函数表达式时，在使用常规模板文字的情况下，它将被视为常规字符串。

For example ${() => myFunction()}is evaluated as string () => myFunction().

例如，将${() => myFunction ()}评估为stri ng () => myFunc tion()。

While the same expression is evaluated as function in case of tagged template literals and the tag can call that function. As shown in the example, while invoking the myTag the expression {() => myFunction()} is evaluated and passed as function in func parameter which our tag invoked using func() on line 9.

如果使用带标签的模板文字，则将相同的表达式评估为函数，并且标签可以调用该函数。 如该示例中所示，在调用myTag表达式{() => myFunction ()}被评估并作为传递函数in f ，我们的标签调用USI UNC参数ng fun第9行C()。

结论 (Conclusion)

Tag’s ability to use function expressions as an interpolation — along with it’s ability to interpret a template using any logic it desires — makes it very powerful. It can be used to create a domain specific language and opens up many possibilities for the use (or abuse) of tagged template literals.

Tag具有将函数表达式用作内插的功能，以及能够使用其所需的任何逻辑来解释模板的功能，使其功能非常强大。 它可用于创建特定领域的语言，并为使用(或滥用)带标签的模板文字开辟了许多可能性。

Tagged template literals enable the development of libraries like styled-components. Please comment below if you can think of what all other use cases could be enabled by tagged template literals.

带有标记的模板文字可用于开发样式化组件之类的库。 如果您可以想到带标签的模板文字可以启用所有其他用例，请在下面发表评论。

翻译自: https://www.freecodecamp.org/news/es6-tagged-template-literals-48a70ef3ed4d/