JavaScript - 带标签的模板

JavaScript 带标签的模板

JavaScript 中的带标签的模板是模板字面量的高级版本。您可以定义用于格式化字符串的函数，并将其与模板字面量结合使用，从而根据函数的功能对字符串进行格式化。

带标签的模板只需使用函数名称即可与字符串一起使用，使用函数时无需添加括号。

语法

以下是在 JavaScript 中使用带标签的语法 -

function format(str, exp1, exp2, ...expN) {
    // 格式化字符串
}

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

在输出中，您可以在字符串末尾看到 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

示例:使用剩余参数

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

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