JavaScript - tagged 模板

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

打印本页