Javascript 简明教程

JavaScript - Tempate Literals

JavaScript Tempate Literals

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

In JavaScript, the template literals are introduced in ES6 to customize the string dynamically. The template literals allow you to add variables or expressions into the string, and the string changes according to the variables and expression value changes.

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

There are multiple synonyms words used for the template literal words. For example, template string, string templates, back-tics syntax, etc.

Syntax

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

Follow the syntax below to use the template literals in JavaScript.

let str = `Hi ${name}`;

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

You need to write a string between back-tics (``). For using the dynamic variable or expression with a string, you need to place it between the ${}.

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

Furthermore, using the template literals, you don’t need escape characters to add single or double quotes in the string.

Examples

Example: Creating Strings with Template Literals

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

In the example below, we used the template literals to create a string with special characters.

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

The str1 string is the same as the regular string we create using single or double quotes. The str2 string contains the single quotes with the string. Here, you can see that we haven’t used the escape characters to add a single quote in the string.

<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

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

The below code demonstrates to use the dynamic values in the string by passing the variables into the template literal string.

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

Here, we have defined the variables related to cars. After that, we create a string using the template literals and add the variables.

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

In the output, you can see that variables are replaced with their value in the string.

<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

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

You can also add the expressions to the string using the template literals.

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

In the str1 string, we added the expression to perform the summation of two numbers in the template literals string.

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

In str2, we invoke the function invocation as an expression. It replaces the expression with a returned value from the function.

<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 允许你在其他模板文字中使用模板文字，这称为嵌套模板文字。

JavaScript allows you to use the template literals inside other template literals, and it is called the nested template literals.

Example

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

In the example below, we added the expression in the outer template literal. The expression contains the ternary operator. It checks whether the 2 is less than 3. Based on the returned boolean value, it executes the first or second nested expression and prints the result.

<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

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

You can also use the template literals to define the multiline string.

<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