入门javascript_现代javascript模板文字入门-CSDN博客

入门javascript

Introduced in 2015 with ECMAScript6, template literals let us dynamically construct strings of text and embedded expressions, even multi-line strings of text, in a more elegant way than concatenation.

自2015年ECMAScript6引入以来，模板文字使我们能够以比串联更优雅的方式动态构造文本字符串和嵌入式表达式，甚至是多行文本字符串。

The syntax is not much different from the old one at first glance:

语法乍一看与旧语法没有太大不同：

const newWay = `is cool`;

Can you spot the difference? Instead of single '’ or double "” quotes we use backticks ``.

您看得出来差别吗？而不是单一的''或双"”引号，我们使用反引号``

字符串插值 (String Interpolation)

In ES5 you had string concatenation:

在ES5中，您有字符串串联：

const name = 'Jack';
const old = 'My name is '+ name + '.';

Using + for both addition and concatenation can be confusing and even lead to unexpected bugs:

同时使用+进行加法和串联可能会造成混淆，甚至导致意外的错误：

Template literals provide an easy way to interpolate variables and expressions into strings. The curly braces accept any valid JavaScript expression inside the ${}:

模板文字提供了一种将变量和表达式内插到字符串中的简便方法。花括号在${}接受任何有效JavaScript表达式：

多行 (Multiline)

In ES5 you had to use the newline character \n explicitly for line breaks and the \ character at the end of a line to be able to write multi-line strings. This allows to create a string on two lines:

在ES5中，必须为换行符显式使用换行符\n ，并在行的末尾使用\字符，才能编写多行字符串。这允许在两行上创建一个字符串：

const concatenation = 'First line\n \
second line';

Template literals make multi-line strings simpler. Once a template literal is opened with the backtick, you press enter to create a new line, with no special characters, and it’s rendered as-is:

模板文字使多行字符串更简单。一旦使用反引号打开模板文字，您可以按Enter创建新行，不包含任何特殊字符，并且按原样呈现：

标记模板 (Tagged Templates)

A not as known feature that comes along with template literals, is the ability to tag them. A tagged template is a function that allows you to parse template literals, which allows us to control the string creation.

模板文字附带的一项不为人所知的功能是能够对其进行标记。带标签的模板是允许您解析模板文字的函数，它使我们能够控制字符串的创建。

The way the tag template works is that you put the name of the function that you want to run against the string before the template. So instead of function() you have function``.

标记模板的工作方式是将要运行的函数的名称放在模板前面。因此，您可以使用function``来代替function() 。

The tag template is equivalent to the following function call:

标签模板等效于以下函数调用：

hi(['My name is ', '.'], name);

First, we get an array of all the string pieces from our literal. After that, we get all the interpolated values. Here we only have one, the `name`.

首先，我们从文字中获取所有字符串的数组。之后，我们获得所有插值。在这里，我们只有一个名字。

So then we would need to change our function to accept these arguments and return the string as we like it:

因此，我们需要更改函数以接受这些参数，并根据需要返回字符串：

You can also alter the strings depending on the arguments, which is where the true power of tagged templates comes through. There are popular libraries like styled-components and lit-html using tagged components.

您还可以根据参数更改字符串，这是标记模板真正发挥作用的地方。有一些流行的库，例如使用标记的组件的styled-components和lit-html 。

结论 (Conclusion)

We have learned how template literals make strings easier to handle. They can take care of our variables and embedded expressions with ease. This is much more powerful than the old concatenation of strings and variables. And we also took a look into tagged templates and how they can let us manipulate the template literals before the browser exposes them to the world.

我们已经了解了模板文字如何使字符串更易于处理。他们可以轻松地处理我们的变量和嵌入式表达式。这比旧的字符串和变量串联要强大得多。我们还研究了带标签的模板，以及它们如何使我们在浏览器将模板文字公开之前对其进行操作。