标记模板字面量_标记模板文字快速介绍

标记模板字面量

by Michael Ozoemena

迈克尔·奥索埃梅纳(Michael Ozoemena)

In this article, I’m going to be talking about what “tagged template literals” are and some places where I’ve seen them being used.

在本文中，我将讨论什么是“标记的模板文字”以及在哪些地方看到了它们的使用。

什么是“标记模板文字”？ (What are “tagged template literals”?)

Tagged template literals were enabled by a new technology introduced in ES6, called “template literals”. This is simply a syntax that makes string interpolation possible in JavaScript. Before template literals was born, JavaScript developers would need to do ugly string concatenation.

ES6中引入了一项称为“模板文字”的新技术，从而启用了标记的模板文字。 这只是一种语法，可以在JavaScript中进行字符串插值。 在template literals诞生之前，JavaScript开发人员将需要进行难看的字符串连接。

Tagged template literals offers you the opportunity to parse template literals in whatever way you want. It works by combining functions with template literals. There are two parts of a tagged template literal, the first one being the tag function and the second, the template literal.

Tagged template literals为您提供了以所需的任何方式解析模板文字的机会。 它通过将函数与template literals结合起来工作。 带tagged template literal有两部分，第一部分是tag function ，第二部分是template literal 。

const coolVariable = "Cool Value";

const anotherCoolVariable = "Another Cool Value";

randomTagFunctionName`${coolVariable} in a tagged template literal with ${anotherCoolVariable} just sitting there`

Now, the first parameter in the tag function is a variable containing an array of strings in the template literal:

现在， tag function的第一个参数是一个变量，该变量包含模板文字中的字符串数组：

function randomTagFunctionName(firstParameter) {

console.log(firstParameter);     // ["", " in a tagged template literal with ", " just sitting there"]

}

And all other subsequent parameters will contain the values passed to the template literal:

其他所有后续参数将包含传递给模板文字的值：

function randomTagFunctionName(firstParameter, secondParameter, thirdParameter) {

console.log(secondParameter);   // "Cool Value"

console.log(thirdParameter);   // "Another Cool Value"

}

Taking advantage of the ES6 Rest operator, we can redefine our function like this:

利用ES6 Rest运算符，我们可以这样重新定义函数：

function randomTagFunctionName(firstParameter, ...otherParameters) {

console.log(otherParameters);   // ["Cool Value", "Another Cool Value"]

}

样式组件中的标记模板文字。 (Tagged Template Literals in Styled-Components.)

Now that you understand what tagged template literals are, let us discuss an application of it in the real world.

现在您了解了标记的模板文字是什么，让我们讨论一下它在现实世界中的应用。

Styled-Components is a JavaScript library that lets you create and attach CSS styles to your React and React Native components. Here’s what that looks like:

Styled-Components是一个JavaScript库，可让您创建CSS样式并将其附加到React和React Native组件上。 看起来像这样：

const Button = styled.button`  color: red;`

In the example above, Button isn’t just a variable, it’s a component. That means you can mix it with other components and its output is an HTML button element.

在上面的示例中，Button不仅仅是一个变量，而是一个组件。 这意味着您可以将其与其他组件混合使用，并且其输出是HTML按钮元素。

This is a very exciting use case for tagged template literals because it lets you have scoped CSS in a way that still keeps your component file clean and makes you feel like you are writing CSS in a regular stylesheet. Without tagged template literals, we would have to represent that style as a JavaScript object like this:

这是带标记的模板文字的一个非常令人兴奋的用例，因为它使您能够以一定的方式对CSS进行范围划分，以保持组件文件的清洁，并感觉就像在用常规样式表编写CSS。 没有标记的模板文字，我们将不得不将该样式表示为JavaScript对象，如下所示：

const Button = styled.button({  color: 'red'})

Another use case is with the graphql-tag library used in Apollo GraphQL. I don’t think there is a possible way to not use the graphql-tag library when dealing with Apollo GraphQL (if there is, please let me know!).

另一个用例是Apollo GraphQL中使用的graphql-tag库。 我认为在处理Apollo GraphQL时，没有不使用graphql-tag库的可能方法(如果有，请告诉我！)。

结论。 (In conclusion.)

I think it’s great to learn new technologies and even better to look at ways in which others have used it to solve problems. If you have other real-world use cases for Tagged Template Literals, please let me know.

我认为学习新技术非常棒，甚至可以更好地研究其他人使用新技术解决问题的方式。 如果您还有其他用于标记模板文字的实际用例，请告诉我。

PS: “Real-World” also means your side-projects or codesandbox code samples.

PS：“真实世界”还表示您的附带项目或codesandbox代码示例。

翻译自: https://www.freecodecamp.org/news/a-quick-introduction-to-tagged-template-literals-2a07fd54bc1d/

标记模板字面量