如何在 ECMAScript 6 中使用模板字符串字面量？

在本文中，我们将学习模板字面量。 JavaScript 中有不同种类的字面量，例如Object 字面量和Boolean 字面量。我们还有用单引号 ' ' 或双引号“”表示的字符串字面量。

从ES6 (ECMAScript 6)开始，我们有模板字面量，由 反引号 (` `)字符。模板字面量帮助我们编写干净的代码。它也称为模板字符串。

句法：

`string text`

此模板字面量也可以包含占位符。我们可以用美元符号和花括号来表示。

`string text ${expression} string text`

让我们通过以下示例了解这些模板字面量如何使我们的生活变得轻松。

示例 1：使用带有字符的字符串的传统方式。

HTML

    const textMessage = "GFG is the\n" +
    "best place to learn DS";
    console.log(textMessage);

输出：

GFG is the
best place to learn DS

示例 2：使用 Template 字面量，我们可以在不使用字符的情况下执行与上述示例相同的操作。我们可以根据需要使用换行符来编写文本。

HTML

    const textMessage = `GFG is the
    best place to learn DS`;
    console.log(textMessage);

输出：

GFG is the
best place to learn DS

示例 3：我们还可以将一些文本括在单引号内，它会毫无问题地显示出来。

HTML

    const textMessage = `GFG is the
    best 'place' to learn DS`;
    console.log(textMessage);

输出：

GFG is the
best 'place' to learn DS

我们还可以在模板字符串中添加动态内容。这可以通过在花括号内定义所需的变量并在其前面带有美元符号来实现。

示例 4：在此示例中，我们将使用模板字面量在字符串中显示名称。

HTML

    const name = "User";
    const message = `Hi ${name}, Welcome to the GeeksForGeeks`;
    console.log(message);

输出：

Hi User, Welcome to the GeeksForGeeks