JavaScript - 模板文本

JavaScript 模板文本

在 JavaScript 中，模板文字（template literals）在 ES6 中引入，以动态地自定义字符串。模板文本允许您将变量或表达式添加到字符串中，字符串会根据变量和表达式值的变化而变化。

有多个同义词用于模板文字单词。例如，模板字符串、字符串模板、back-tics 语法等。

语法

按照下面的语法在 JavaScript 中使用模板文本。


 let str = `Hi ${name}`;

您需要在 back-tics （''） 之间编写一个字符串。要将动态变量或表达式与字符串一起使用，您需要将其放在 ${} 之间。

此外，使用模板文本，您不需要转义字符即可在字符串中添加单引号或双引号。

例子

示例：使用模板文本创建字符串

在下面的示例中，我们使用模板文本创建包含特殊字符的字符串。

str1 字符串与我们使用单引号或双引号创建的常规字符串相同。str2 字符串包含带有字符串的单引号。在这里，你可以看到我们没有使用转义字符在字符串中添加单引号。


<html>
<body>
	 	<div id = "output1"> </div>
	 	<div id = "output2"> </div>
	 	<script>
	 	 	 let str1 = `Hello Users!`;
	 	 	 let str2 = `'QikepuCom' is a good website`;
	 	 	 document.getElementById("output1").innerHTML = str1;
	 	 	 document.getElementById("output2").innerHTML = str2;
	 	</script>
</body>
</html>

输出

Hello Users!
'QikepuCom' is a good website

示例：具有模板文本的变量

下面的代码演示了如何通过将变量传递到模板文本字符串来使用字符串中的动态值。

在这里，我们定义了与汽车相关的变量。之后，我们使用模板文字创建一个字符串并添加变量。

在输出中，您可以看到变量已替换为它们在字符串中的值。


<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 let car = "BMW";
	 	 	 let model = "X5";
	 	 	 const price = 5000000;
	 	 	 const carStr = `The price of the ${car} ${model} is ${price}.`;
	 	 	 document.getElementById("output").innerHTML = carStr;
	 	</script>
</body>
</html>

输出

The price of the BMW X5 is 5000000.

示例：具有模板文本的表达式

您还可以使用模板文本将表达式添加到字符串中。

在 str1 字符串中，我们添加了表达式来执行模板文本字符串中两个数字的求和。

在 str2 中，我们将函数调用作为表达式调用。它将表达式替换为函数的返回值。


<html>
<body>
	 	<div id = "output1"> </div>
	 	<div id = "output2"> </div>
	 	<script>
	 	 	 function func() {
	 	 	 	 	return 10;
	 	 	 }
	 	 	 	
	 	 	 const str1 = `The sum of 2 and 3 is ${2 + 3}.`;
	 	 	 const str2 = `The return value from the function is ${func()}`;
	 	 		
	 	 	 document.getElementById("output1").innerHTML = str1;
	 	 	 document.getElementById("output2").innerHTML = str2;
	 	</script>
</body>
</html>

输出

The sum of 2 and 3 is 5.
The return value from the function is 10

JavaScript 嵌套模板文本

JavaScript 允许你在其他模板文本中使用模板文本，它被称为嵌套模板文本。

例

在下面的示例中，我们在外部模板文本中添加了表达式。表达式包含三元运算符。它检查 2 是否小于 3。根据返回的布尔值，它执行第一个或第二个嵌套表达式并打印结果。


<html>
<head>
	 	<title>Nested Template Literals</title>
</head>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const nested = `The subtraction result is: ${2 < 3 ? `${3 - 2}` : `${2 - 3}`}`;
	 	 	 document.getElementById("output").innerHTML = nested;
</script>
</body>
</html>

输出

The subtraction result is: 1

示例：使用模板文本的多行字符串

您还可以使用模板文本来定义多行字符串。


<html>
<body>
	 	<div id = "output"> </div>
	 	<script>
	 	 	 function func() {
	 	 	 	 	return 10;
	 	 	 }
	 	 		
	 	 	 const str1 = `The sum of 2 and 3 is ${2 + 3}. <br>
	 	 	 The return value from the function is ${func()}`;
	 	 		
	 	 	 document.getElementById("output").innerHTML = str1;
	 	</script>
</body>
</html>

输出

The sum of 2 and 3 is 5.
The return value from the function is 10

打印本页