JavaScript - 标记模板
JavaScript 标记模板
JavaScript 中的标记模板是模板字面量的进阶版本。您可以定义一个函数来格式化字符串，并使用它与模板字面量结合，根据函数的功能格式化字符串。
标记模板只需使用函数名即可与字符串一起使用，无需在调用函数时添加括号。
语法
以下是在 JavaScript 中使用标记模板的语法 −
function format(str, exp1, exp2, ...expN) {
// 格式化字符串
}
let res = format`${exp1} abcd ${exp2}`;
上述语法中，format() 函数作为模板标签使用。该函数接受多个参数，您可以在函数体内使用这些参数来格式化字符串。
参数
str − 它是模板字面量的字符串数组。
exp1, exp2, ...expN − 它们是模板字面量的表达式。
示例
示例：基本标记模板
在下面的示例中，我们定义了 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
示例：使用 Rest 参数
您还可以使用 spread operator（参数）将模板中所有的表达式收集到一个函数参数中。否则，您需要为字符串中使用的每个表达式单独传递参数。
在下面的示例中，我们使用 spread operator 传递两个参数，name 和 price。在输出中，您可以看到参数（arguments）的值被显示。
<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