Javascript 简明教程

JavaScript - Tempate Literals

JavaScript Tempate Literals

在 JavaScript 中， template literals 在 ES6 中引入，用于动态自定义字符串。模板文字允许你在字符串中添加变量或表达式，并且该字符串会根据变量和表达式值的变化而变化。

有很多同义词可用于模板文字。例如，模板字符串、字符串模板、反引号语法等。

Syntax

按照以下语法在 JavaScript 中使用模板文字。

let str = `Hi ${name}`;

你需要将字符串写在反引号（``）之间。要将动态变量或表达式与字符串一起使用，你需要将它们放在 ${} 之间。

此外，使用模板文字时，你无需转义字符即可在字符串中添加单引号或双引号。

Examples

Example: Creating Strings with Template Literals

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

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

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

Hello Users!
'Tutorialspoint' is a good website

Example: Variables with Template Literals

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

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

在输出中，你可以看到字符串中的变量被它们的实际值替换。

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

Example: Expressions with Template Literals

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

在 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 Nested Template Literals

JavaScript 允许你在其他模板文字中使用模板文字，这称为嵌套模板文字。

Example

在下面的示例中，我们在外部模板文字中添加了表达式。该表达式包含三元运算符。它检查 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

Example: Multiline String Using Template Literal

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

<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