ES6/ECMA6 模板文字在 JavaScript 中不起作用?

javascriptweb developmentfront end technology

模板文字是 ECMAScript 6 (ES6) JavaScript 语言的一项强大且有用的功能。但是，有时模板文字在您的代码中可能无法正常工作。

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

模板文字在 ES6 之前被称为模板字符串。模板文字 由反引号 (' ') 字符包围，而不是字符串中的引号。模板文字中允许使用占位符，用美元符号和 花括号 ($(expression)) 表示。如果我们想使用表达式，我们可以使用 ($(expression)) 符号将其放在反引号内。

语法

以下是模板文字的语法

var str = `string value`;

让我们深入研究本文以了解有关 ES6/ECMA6 模板文字的更多信息。

多行字符串

从常规字符串创建多行字符串时，我们必须使用转义序列
。相反，在模板文字中无需使用
，因为字符串只有在遇到 反引号(') 字符时才会结束。

示例

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

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

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

示例

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

<!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>

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