跳至正文
首页 » 博客 » Easy JavaScript Part 9: What are Template Literals?

Easy JavaScript Part 9: What are Template Literals?

在ES6中，引入了两种类型的文字:

  1. 模板文字字符串串联和表达式嵌入字符串
  2. 标记的模板文字标记模板文字在函数中，以便文字可以在函数

    3. 中计算

假设您需要使用动态表达式或变量的值进行字符串连接。看看下面的代码:

var foo = 9;var result = 'Result = ${ foo} ';console.log (结果)；

在这里，您需要将变量foo的值嵌入到字符串文字中。在ES6中，您可以使用模板文字来执行此操作，如上面的代码清单所示。模板文字主要用于以下目的:

  • 字符串串联
  • 创建多行字符串
  • 要嵌入表达式
  • 使用字符串插值

在上面的代码中，我们在字符串结果中嵌入了表达式foo。要使用模板文本，请执行以下操作:

  1. 模板文字是在反刻度 (“”) 字符内创建的。
  2. 在模板文本中，占位符是使用 ${expression} 符号创建的。在运行时，表达式将被计算并替换在占位符中。
  3. 在模板文本中，可以使用 ${expression} 嵌入表达式。这也称为表达式插值。

使用模板文字，让我们创建一些表达式插值。考虑下面的代码:

var num1 = 9;var num2 = 7;var result = 'Result = ${ num1 num2} 和两次result = $ {2 * (num1 num2)} '；console.log (结果)；

为了在这里创建表达式插值，我们使用模板文字。你还会注意到字符串被分成多行。如果需要，还可以创建嵌套模板。

标记的模板文字

ES6允许您标记模板文字，这意味着您可以在函数中解析它。因此，如果您使用标记的模板文字，JavaScript不会立即将它们分配给变量，而是在函数中解析它们。让我们看一个例子:

函数sayHello() {  }const name = "foo";const country = "印度"const结果 = 'hey ${ name} 国家/地区欢迎 ${} '；console.log (结果)；

现在让我们假设在sayHello函数中，您想要传递一个模板文字，执行一些操作，并返回一个结果。要做到这一点，你可以标记模板字面功能如下所示:

函数sayHello() {  }const name = "foo";const country = "印度"const结果 = sayHello'嘿$ {姓名}欢迎来到$ {国家/地区}';console.log (结果);

在这里，您已经将模板文字标记为函数sayHello。在标记模板文字中，函数获取以下参数:

  1. 第一个参数是一个字符串数组。
  2. 向前的第二个参数是内插值。

让我们修改sayHello函数以使用这些参数。考虑下面的代码:

函数sayHello(strings，name，country) { console.log(strings[0]); // 嘿console.log(strings[1]) // 欢迎使用console.log(strings[2]) // 空字符串console.log(strings[3]) // 未定义 }const name = "foo";const country = "印度"const结果 = sayHello'嘿$ {姓名}欢迎来到$ {国家/地区}';console.log (结果)；

如您所见，模板文字的所有字符串将作为函数的第一个参数传递。在其他两个参数 (名称和国家) 中，将传递插值。因此，名称将包含foo，国家将包含印度。现在让我们看看下面的代码:

函数sayHello(strings，name，country) {var res = '';var ctrstring = '';如果 (country = "印度" =)ctrstring =; "访问德里"}else if (country = = "USA") {ctrstring = "visit NY";}else {ctrstring = "visit any where";}res = 字符串 [0] 名称字符串 [1] 国家ctrstring；返回res；} const name = "foo";const country = "印度"const结果 = sayHello'嘿$ {姓名}欢迎来到$ {国家/地区}';console.log (结果) // 嘿foo欢迎来到印度访问德里

在上面的代码片段中，我们正在检查插值参数country的值，然后创建一个新的字符串并返回。您将获得预期的输出，但是上述方法有一个问题: 您正在将所有插值参数映射到命名参数中。这可能导致内插参数的动态数量的问题。这可以使用JavaScript REST参数来解决 (了解更多关于REST参数这里 )。所以我们应该重写上面的代码，如下所示:

函数sayHello(strings，... 参数) {var res = '';var ctrstring = '';如果 (country = "印度" =)ctrstring =; "访问德里"}else if (params[1] = = "USA") {ctrstring = "visit NY";}else {ctrstring = "visit any where";}res = strings[0] params[0] strings[1] params[1] ctrstring;返回res；}const name = "foo";const country = "印度" const结果 = sayHello'嘿$ {姓名}欢迎来到$ {国家/地区}';console.log (结果) // 嘿foo欢迎来到印度访问德里

如您所见，您可以将Rest参数和标记的模板文字组合在一起，以获得更好的用例。

结论

ES6引入了两种类型的文字，用于字符串连接和在字符串中嵌入表达式的模板文字，以及用于在函数中标记模板文字的标记模板文字，以便可以在函数中评估文字。在这篇文章中，我们深入介绍了他们两个!

在这个 “Easy JavaScript” 系列的下一篇文章中，您将了解JavaScript的另一个重要概念，敬请期待。同时，不要忘记查看Ignite UI ，您可以将其与HTML5，Angular，React或ASP.NET MVC一起使用来创建富Internet应用程序。</p

标签: