Javascript 简明教程

JavaScript - Tagged Templates

JavaScript Tagged Templates

JavaScript 中的标记模板是模板字面量的高级版本。你可以定义格式化字符串的函数并使用它配合模板字面量，根据该函数的功能来格式化字符串。

The tagged templates in JavaScript are an advanced version of the template literals. You can define the function to format the string and use it with a template literal to format the string according to the functionality of the function.

标记模板可以用函数名与字符串配合使用，并且在使用该函数时不需要加括号。

The tagged template can be used with the string using the function name only, and it does not need to add the parenthesis while using the function.

Syntax

以下是 JavaScript 中使用标记模板的语法 −

Following is the syntax to use the tagged templates in JavaScript −

function format(str, exp1, exp2, ...expN) {
    //    Format the string
}

let res = format`${exp1} abcd ${exp2}`;

format() 函数在上述语法中作为模板标签。该函数获取多个参数，你可以在函数体中使用这些参数来格式化字符串。

The format() function works as a template tag in the above syntax. The function takes multiple parameters, which you can use inside the function body to format the string.

Parameters

  1. str − It is an array of strings of template literal.

  2. exp1, exp2, …​expN − They are expressions of the template literals.

Examples

Example: Basic Tagged Template

在以下示例中，我们定义了 format() 函数。format() 函数获取字符串数组作为参数。

In the example below, we have defined the format() function. The format() function takes the array of strings as a parameter.

函数体连接 str 数组的所有元素，使用 toUpperCase() 方法将字符串转换为大写，并返回更新后的字符串。

The function body joins all elements of the str array, converts the string into the upper case using the toUpperCase() method, and returns the updated string.

在输出中，你可以看到模板标记已经将字符串转换成了大写。

In the output, you can see that the template tagged has converted the string into uppercase.

<html>
<body>
   <p id = "output"> </p>
   <script>
      function format(str) {
         return str.join("").toUpperCase();
      }
      let res = format`Hi How are you?`;
      document.getElementById("output").innerHTML = res;
   </script>
</body>
</html>
HI HOW ARE YOU?

Example: Expression with Tagged Templates

在以下示例中，format() 函数获取字符串数组和 name 变量作为参数。我们在函数体中连接所有字符串实例，并在末尾附加 name。之后，返回更新后的字符串。

In the example below, the format() function takes the array of strings and name variable as a parameter. We join all string instances in the function body and append the name at the end. After that, return the updated string.

在输出中，你可以看到字符串末尾的 name。

In the output, you can see the name at the end of the string.

<html>
<body>
   <p id = "output"> </p>
   <script>
      function format(str, name) {
         return str.join(" ") + name;
      }
      let name = "John";
      let res = format`Hi ${name}, How are you?`;
      document.getElementById("output").innerHTML = res;
   </script>
</body>
</html>
Hi , How are you?John

Example: Using Rest Parameter

你还可以使用扩展运算符（参数）来在单个函数参数中收集所有表达式。否则，你需要为字符串中使用的每个表达式分别传递参数。

You can also use the spread operator (parameter) to collect all expressions in the single function parameters. Otherwise, you need to pass the parameter for each expression used in the string separately.

在以下示例中，我们使用扩展运算符传递两个参数 name 和 price。在输出中，你可以注意到显示了参数（参数）的值。

In the below example, we use spread operator to pass two parameters, name and price. In output you can notice the values of the parameters (arguments) are displayed.

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      function format(str, ...values) {
         document.getElementById("output1").innerHTML = values;
         return str.join(" ") + values[1];
      }
      const price = 100;
      let name = "John"
      const res = format`Hi,${name} The price is ${price}`;
      document.getElementById("output2").innerHTML = res;
   </script>
</body>
</html>
John,100
Hi, The price is 100