如何在 ECMAScript 6 中使用模板字符串文字?

PHPz
发布: 2023-08-24 08:41:04
转载
469 人浏览过

如何在 ECMAScript 6 中使用模板字符串文字?

在 JavaScript 的 ES6 版本中,引入了文字。 JavaScript 包含对象文字、数组文字、数字文字、RegExp 文字等。此外,它还包含字符串文字。

字符串文字允许我们创建不带任何反斜杠字符的多行字符串,在引号中添加任何单词或句子,以及在字符串之间添加变量和数学表达式。

语法

用户可以按照以下语法在 ECMAScript 6 中使用模板字符串文字。

let string = `This is template literal string!`;
登录后复制

在上面的语法中,我们使用反引号 (``) 来创建模板文字字符串。

示例 1(多行字符串)

在下面的示例中,我们使用模板文字字符串来创建多行字符串。每当我们创建带引号的字符串时,我们都需要使用“

”字符来创建新行,但是使用字符串文字,我们可以通过在新行中写入字符串来实现。

在 string1 中,新行是通过在新行中写入字符串来创建的,而在 string2 中,我们使用“

”字符来创建新行。用户可以观察输出中的 string1 和 string2,它们看起来是相同的。

let string1 = `This is first line. This is the second line. This is the third line. This is the fourth line.`; console.log(string1); // added character to create a multiline string. let string2 = "Welcome on the TutorialsPoint!"; console.log(string2);
登录后复制

示例 2(字符串中的引号)

我们可以使用模板字符串文字在字符串内添加引号。当我们创建带有双引号的字符串时,我们只能为该字符串添加单引号,而当我们创建带有单引号的字符串时,我们也只能为该字符串添加双引号。

我们使用字符串文字在 stringQuote 变量的字符串中添加了单引号。

  

Using the template string literals to add quotes in the string.

登录后复制

示例 3(字符串中的变量)

在下面的示例中,我们在字符串中完成了变量替换。一般来说,要在字符串中使用变量,我们需要使用“+”运算符并连接多个字符串,但模板字符串文字允许我们直接在字符串中添加变量。我们可以在 ${} 表达式中添加变量。

在variableStr变量的值中,我们插入了name、job和timePeriod变量。

  

Using the template string literals to add variables in the string.

登录后复制

示例 4(字符串中的表达式)

在此示例中,我们将使用模板字符串文字在字符串中添加数学表达式。在 sumString 中,我们在 ${} 内添加了数学表达式。用户可以看到我们如何在字符串中对 num1 和 num2 求和。

此外,我们还对 string2 中的 2 个值进行了乘法运算。

  

Using the template string literals to add expression in the string.

登录后复制

示例 5(字符串中的 HTML)

我们可以使用模板字符串文字创建一行 HTML 并将其添加到网页中。在此示例中,我们使用字符串文字创建了 HTML 列表,并使用 的innerHTML 属性在网页中添加行 HTML。

  

Using the template string literals to add HTML to the document.

登录后复制

用户学会了在 JavaScript 中使用模板字符串文字。我们已经了解了如何创建多行字符串、变量和表达式替换、添加引号以及使用模板字符串文字创建行 HTML。

以上是如何在 ECMAScript 6 中使用模板字符串文字?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:tutorialspoint.com
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!