Javascript 简明教程

JavaScript - Tagged Templates

JavaScript Tagged Templates

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

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

Syntax

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

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

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

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

Parameters

  1. str − 它是模板字面量的字符串数组。

  2. exp1, exp2, …​expN − 它们是模板字面量的表达式。

Examples

Example: Basic Tagged Template

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

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

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

<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。之后，返回更新后的字符串。

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

<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

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

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

<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