Logo

菜单

发布于 2026-01-06 0 阅读
0

ES6 模板字面量简介

ES6 模板字面量简介

还记得在 JavaScript 中，当你需要在字符串中插入多个变量时，代码有多么糟糕吗？哦，你得一遍又一遍地写引号''和+逗号。然后你运行代码，才发现变量和正文之间没有正确分隔，或者忘记在变量末尾加句号，导致它看起来像一个完整的句子。好吧，你得认识一下我的朋友——模板字面量。它会让你彻底忘记这些烦恼。好了，别再抱怨了……哈哈。现在我们来认真点。

模板字面量是允许嵌入表达式的字符串字面量。如果这听起来有点复杂，别担心，你很快就能掌握。我们在使用字符串时会遇到一些问题。我们可能需要对字符串进行插值、包含嵌入式表达式或使用多行字符串。所有这些操作都可以在 ES6 之前的 JavaScript 版本中实现。然而，模板字面量让这一切变得异常简单，而且简洁优雅。本文将对此进行详细介绍。在下一篇文章中，我们将讨论带标签的模板字面量。首先，以下是关于模板字面量的一些基本知识。

  1. 模板字面量只是另一种编写字符串的方式，它使用反引号而不是单引号''或双引号""。在 ES6 之前，它被称为模板字符串。

  2. 要将表达式（占位符）嵌入模板字面量中，我们用美元符号和花括号将其括起来，像这样${expression}。

  3. 除非指定函数，否则反引号内的所有内容都会传递给默认函数，该函数会将它们连接成一个字符串。

我们已经做好一切准备，继续前进。

字符串插值
这就是文章开头提到的问题。让我们回顾一下它带来的痛苦。

    let name = "Sarah";
    let job = "Developer";
    let tools = "JavaScript and CSS";

    console.log("My name is " + name + " and I am a " + job + ". I write " + tools + "." );//My name is Sarah and I am a Developer. I write JavaScript and CSS."
Enter fullscreen mode Exit fullscreen mode

我们将使用 ES6 的模板字面量来实现这一点。

    let name = "Sarah";
    let job = "Developer";
    let tools = "JavaScript and CSS";
    console.log(`My name is ${name} and I am a ${job} . I write ${tools}.`);//My name is Sarah and I am a Developer. I write JavaScript and CSS."
Enter fullscreen mode Exit fullscreen mode

你看，这样是不是简单多了？注意，这里用的是反引号而不是引号，而且所有变量都放在美元符号和花括号里。我们来进一步学习。

让我们使用模板字面量嵌入一个数学表达式。

    console.log(`Jessy has ${5+3} cats and ${3+2} dogs.`)//"Jessy has 8 cats and 5 dogs."
Enter fullscreen mode Exit fullscreen mode

我们还可以嵌入函数。

   let sayHello = () => "Hello";

   console.log(`${sayHello()}, it's the code girl next door.`);//"Hello, it's the code girl next door."
Enter fullscreen mode Exit fullscreen mode

我们再来一个，图个乐子。

   let sayName = () => "Template Literal";
   let num = 5;

   console.log(`I am a ${sayName()} and I am ${num *2}x more powerful.`);//"I am a Template Literal and I am 10x more powerful."
Enter fullscreen mode Exit fullscreen mode

多行字符串

还记得\n字符串中 `\n` 的用途吗？如果你说是换行……那就对了。如果你说换行的唯一方法……嗯，那就错了。模板字面量允许你直接换行，而无需使用任何字符。所以，与其这样做：

   console.log("I am the first line \n, I am the second line \n And I am the third line.");
Enter fullscreen mode Exit fullscreen mode

我们可以简单地这样做：

   console.log(`I am the first line,
 I am the second line
 And I am the third line.`);
Enter fullscreen mode Exit fullscreen mode

结果相同。

   "I am the first line,
    I am the second line
    And I am the third line."
Enter fullscreen mode Exit fullscreen mode

太酷了！！！

让我们通过一个例子来了解这些功能的用途。我们想使用 JavaScript 向页面添加 HTML 标记。模板字面量可以非常简洁地实现这一点。请看下面的例子。

    const animal = {
        kind: "Monkey",
        food: "bananas", 
        hobby: "jumping trees"
    };


   const display = `
        <div class = "animal">
            <h1>Hey, this is a ${animal.kind}</h1>
            <p>It eats ${animal.food} and loves ${animal.hobby}</p>
        </div>
    `;
    document.body.innerHTML = display;
Enter fullscreen mode Exit fullscreen mode

看看用模板字面量实现起来多么简单简洁。是不是很棒？
我的下一篇文章将介绍带标签的模板字面量。敬请期待。

有任何问题或补充吗？请留言。
感谢阅读！:)

文章来源：https://dev.to/sarah_chima/an-introduction-to-es6-template-literals-94l
🌌 Nebula Works –...
React Material Da...