JavaScript - 标签模板

JavaScript 标签模板

JavaScript 中的标签模板是模板字面量的进阶版本。您可以定义函数来格式化字符串，并将其与模板字面量一起使用，以根据函数的功能来格式化字符串。

标签模板可以使用函数名与字符串一起使用，使用函数时不需要添加括号。

语法

以下是 JavaScript 中使用标签模板的语法：

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

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

在上面的语法中，`format()` 函数充当模板标签。该函数接受多个参数，您可以在函数体中使用这些参数来格式化字符串。

参数

str − 它是模板字面量的字符串数组。
exp1, exp2, ...expN − 它们是模板字面量的表达式。

示例

示例：基本的标签模板

在下面的示例中，我们定义了 `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?

示例：带有表达式的标签模板

在下面的示例中，`format()` 函数将字符串数组和 `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

示例：使用 rest 参数

您还可以使用展开运算符 (rest 参数) 将所有表达式收集到单个函数参数中。否则，您需要为字符串中使用的每个表达式分别传递参数。

在下面的示例中，我们使用展开运算符传递两个参数 `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

打印页面