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

列印頁面