JavaScript tagged 模板
JavaScript 中的标记（tagged）模板是 模板文字 的高级版本。您可以定义函数来设置字符串的格式，并将其与模板文本一起使用，以根据函数的功能设置字符串的格式。
tagged 模板只能与使用函数名称的字符串一起使用，并且在使用函数时不需要添加括号。
语法
以下是在 JavaScript 中使用 tagged 模板的语法 -
function format(str, exp1, exp2, ...expN) {
// Format the string
}
let res = format`${exp1} abcd ${exp2}`;
format（） 函数在上述语法中用作模板标签。该函数采用多个参数，您可以在函数体内使用这些参数来设置字符串的格式。
参数
- str − 它是一个模板文字的字符串数组。
- exp1， exp2， ...expN − 它们是模板文字的表达式。
例子
示例：基本 tagged 模板
在下面的示例中，我们定义了 format（） 函数。format（） 函数将字符串数组作为参数。
函数体联接 str 数组的所有元素，使用 toUpperCase（） 方法将字符串转换为大写，并返回更新的字符串。
在输出中，您可以看到 tagged 的模板已将字符串转换为大写。
<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?
示例：带有 tagged 模板的表达式
在下面的示例中，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 参数
您还可以使用扩展运算符 （parameter） 来收集单个函数参数中的所有表达式。否则，您需要为字符串中使用的每个表达式单独传递参数。
在下面的示例中，我们使用 spread 运算符传递两个参数，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
Hi, The price is 100
