数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究JavaScript 中 ES6/ECMA6 模板字面量无效？
模板字面量是 ECMAScript 6 (ES6) JavaScript 语言中强大而有用的功能。但是，有时模板字面量在您的代码中可能无法正常工作。
本文将讨论您可能会遇到的一些常见的模板字面量问题，以及解决这些问题的潜在解决方案。此外，我们将概述模板字面量是什么以及如何使用它们来创建更高效且更易读的代码。
模板字面量在ES6之前被称为模板字符串。模板字面量用反引号（` `）括起来，而不是字符串中的引号。占位符由美元符号和花括号（$(表达式)）表示，在模板字面量中是允许的。如果我们想使用表达式，我们可以使用($(表达式))符号将其放在反引号内。
语法
以下是模板字面量的语法
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>
运行上述脚本后，Web 浏览器会显示在事件触发时获得的值，如上述脚本在网页上使用的值。
示例
考虑下面的示例，我们在这里使用模板字面量允许在字符串中使用变量。
<!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>
当脚本执行时，它将生成一个包含事件触发时获得的文本的输出，并将其显示在 Web 浏览器上。
示例
让我们看看另一个示例，其中模板字面量在字符串内同时使用单引号和双引号。
<!DOCTYPE html>
<html>
<body>
<p id="tutorial"></p>
<script>
let text = `johnny johnny "yes-papa."`;
document.getElementById("tutorial").innerHTML = text;
</script>
</body>
</html>
运行上述脚本后，事件将被触发，Web 浏览器将文本显示在网页上。
更新于：2023年1月18日
1K+ 次浏览
广告