JavaScript ES6/ECMA6模板字词不起作用

模板字面是ECMAScript 6 (ES6)JavaScript语言的一个强大而有用的功能。然而，有时模板字词在你的代码中可能无法正常工作。

本文将讨论你可能遇到的模板字面的一些常见问题，以及解决这些问题的潜在方案。此外，我们还将概述什么是模板字面，以及如何使用它们来创建更有效和可读的代码。

模板字元在ES6之前被称为模板字符串。模板字元由反斜线（\）字符包围，而不是字符串中的引号。占位符，由$符号和大括号（$(expression)）表示，在模板字面中是允许的。如果我们想使用一个表达式，我们可以使用($(expression))符号把它放在后括号内。

语法

以下是模板字词的语法

var str = `string value`;

让我们深入了解这篇文章，以了解更多关于ES6/ECMA6模板字面的信息。

多行字符串

当从普通字符串创建一个多行字符串时，我们必须使用转义序列。相反，在模板字面中不需要使用，因为字符串只有在遇到backtick(‘)字符时才结束。

示例

在下面的例子中，我们正在创建一个多行字符串模板。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   Tutorialspoint
   <script>
      let text =`Welcome to Tp`;
      document.getElementById("tutorial").innerHTML = text;
   </script>
</body>
</html>

当脚本被执行时，它将产生一个由我们在上述脚本中使用的文本组成的输出，当事件被触发时，它将显示在网络浏览器上。

示例

在下面的例子中，我们使用模板字面来允许字符串中的表达。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      let amount = 11;
      let VAT = 0.5;
      let total = `NET: ${(amount * (1 + VAT)).toFixed(2)}`;
      document.getElementById("tutorial").innerHTML = total;
   </script>
</body>
</html>

在运行上述脚本时，网页浏览器会显示出上述脚本中使用的事件被触发时获得的数值。

示例

考虑到下面的例子，我们正在使用模板字面来允许字符串中的变量。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      let firstName = "minion";
      let lastName = "angrybird";
      let text = `Welcome  ${firstName},$ {lastName}!`;
      document.getElementById("tutorial").innerHTML = text;
   </script>
</body>
</html>

当脚本被执行时，它将生成一个由事件被触发时获得的文本组成的输出，并将其显示在网络浏览器上。

示例

让我们看看另一个例子，模板字面在字符串中同时使用单引号和双引号。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      let text = `johnny johnny "yes-papa."`;
      document.getElementById("tutorial").innerHTML = text;
   </script>
</body>
</html>

在运行上述脚本时，事件被触发，网络浏览器在网页上显示文本。