标记模板 - Javascript

什么是标记模板？

标记模板是一种特殊的Javascript函数，它可以将字符串和表达式混合起来，从而生成复杂的HTML、CSS和其他文本格式的代码。

如何使用标记模板？

使用标记模板的基本语法是在一个反引号字符（`)中包含一个或多个表达式，并使用`${}`将表达式嵌入字符串中。例如：

const name = 'Alice';
const html = `<h1>Hello, ${name}!</h1>`;

将生成HTML代码<h1>Hello, Alice!</h1>。

标记模板可以接受任意数量的表达式，并可以在表达式之间插入任意文本，有点像HTML模板。

如何创建一个标记模板函数？

我们可以使用函数声明语法来定义标记模板函数，函数的第一个参数是一个数组，包含了所有的文本片段，第二个参数及以后的参数是所有嵌入的表达式，例如：

function hello(strings, ...values) {
  console.log(strings);
  console.log(values);
  return `Hello, ${values[0]}!`;
}

const name = 'Alice';
const message = hello`Hi, ${name}! How are you?`;
console.log(message);

在这个例子中，hello函数包含一个模板字符串Hi, ${name}! How are you?。该模板字符串被转换成两个数组：strings和values。strings数组包含所有不包含表达式的文本片段，而values数组包含所有嵌入的表达式的值。在这个例子中，strings是['Hi, ', '! How are you?']，而values是['Alice']。函数返回一个新的字符串Hello, Alice!。

如何在标记模板中使用标签属性？

标记模板也可以使用标签属性。我们可以将一个标签属性的值设置为一个表达式，并在标记模板函数中访问该表达式的值。例如：

function link(strings, url, title) {
  return `<a href="${url}" title="${title}">${strings[0]}</a>`;
}

const url = 'https://www.google.com';
const title = 'Google';
const linkHtml = link`click here to go to ${url} and search for ${title}`;
console.log(linkHtml);

在这个例子中，link函数包含一个模板字符串click here to go to ${url} and search for ${title}。该模板字符串被转换成一个数组strings，包含文本'click here to go to '。link函数另外还接收两个参数，url和title，它们是在标签属性中嵌入的表达式的值。link函数返回HTML代码<a href="https://www.google.com" title="Google">click here to go to </a>。注意：url和title的值间跟着文本片段' and search for '。

标记模板的其他用途

标记模板的用途不仅仅是创建HTML、CSS和其他文本格式的代码。它还可以作为一种简单的函数式编程风格，可以用来“反转”代码的流程，例如：

function upper(strings, ...values) {
  return strings.reduce((acc, str, i) => acc + str + (values[i] || '').toUpperCase(), '');
}

const name = 'Alice';
const message = upper`Hi, ${name}! How are you?`;
console.log(message);

在这个例子中，upper函数接受一个字符串数组strings和一个参数列表...values。它使用reduce函数将strings数组中的每个文本片段和values数组中的每个参数合并在一起，并将每个参数转换为大写字母。该函数返回一个新的字符串。

如何扩展标记模板？

标记模板可以与其他函数和模块一起使用，从而为开发人员提供更多的功能。其中一种常见的扩展方式是在标记模板函数的顶部声明一个通用的标记函数，例如：

function upper(strings, ...values) {
  return tag(strings, values).toUpperCase();
}

function tag(strings, values) {
  return strings.reduce((acc, str, i) => acc + str + (values[i] || ''), '');
}

const name = 'Alice';
const message = upper`Hi, ${name}! How are you?`;
console.log(message);

在这个例子中，upper函数使用一个名为tag的通用标记函数来处理模板字符串的文本和值。它在调用标记函数之前先将所有参数转换为大写字母，然后再将结果传递给标记函数。标记函数将所有文本片段和值合并在一起，并返回一个新的字符串。

参考资料

• 标记模板字符串