标签模板字符串和模板字符串

模板字符串通常用来处理字符串拼接, 如

let name = '阿四'
//正常字符串拼接
let str1 = 'name:' + name;
//模板字符串拼接
let str2 = `name:${name}`

标签模板字符串

而标签模板字符串（tagged template string）是一种特殊的模板字符串语法，它可以让我们自定义模板字符串的解析方式。
在标签模板字符串中，我们可以在模板字符串前面使用一个函数，这个函数被称为模板字符串的标签（tag）。当我们使用模板字符串时，JavaScript 引擎会首先调用这个标签函数，并将模板字符串中的各个部分作为参数传递给它。标签函数可以对这些部分进行处理，并返回一个新的字符串作为最终的模板字符串。

标签函数的参数包括两个部分：

一个是字符串数组（即模板字符串中所有的字符串部分）
另一个是每个插值表达式的值（即模板字符串中所有的变量部分）。

下面是一个简单的示例，展示了如何使用标签模板字符串：

function myTag(strings, ...values) {
  console.log(strings); // 输出 ["Hello ", "!"]
  console.log(values); // 输出 ["world"]
  
  return strings[0] + values[0] + strings[1];
}

const message = myTag`Hello ${'world'}!`;
console.log(message); // 输出 "Hello world!"

在上面的例子中，我们定义了一个名为 myTag 的函数作为模板字符串的标签。当我们使用 myTag 标签来处理模板字符串时，它会首先被调用，并将模板字符串的字符串部分和变量部分作为参数传递给它。在这个函数中，我们可以对这些参数进行任意的处理，并返回一个新的字符串作为最终的模板字符串。

在这个例子中，我们将模板字符串分成了两个部分："Hello " 和 "!"。同时，我们将插值表达式中的变量值（即 "world"）也传递给了标签函数。在标签函数中，我们将这些部分重新组合起来，并返回了一个新的字符串 "Hello world!"。最终，这个字符串被赋值给了变量 message。

需要注意的是，在使用标签模板字符串时，模板字符串前面必须紧跟着标签函数。如果没有标签函数，模板字符串就不能正确地解析。

使用案例

案例一国际化和本地化

标签模板字符串可以用于国际化和本地化的字符串翻译。通过在标签函数中根据不同的语言环境选择合适的翻译，并将翻译后的字符串返回，可以实现简单的国际化功能。

function translate(strings, ...values) {
  // strings:[ "转义这两个单词:", "和", "" ]
  // values:[ "Hello", "world" ]
  
  const lang = "en";
  const wordMap = {
    Hello: "你好",
    world: "世界",
  };
  let result = "";
  strings.forEach((v, i) => {
    result += v;
    result += wordMap[values[i]] || strings[i];
  });
  return result
}

const res = translate`转义这两个单词:${"Hello"}和${"world"}`;

console.log(res); //转义这两个单词:你好和世界

案例二样式化字符串

标签模板字符串可以用于动态生成样式化的字符串。例如，可以根据特定的条件或变量值，在标签函数中添加特定的 CSS 类名或行内样式，从而动态改变字符串的样式。

// 定义一个标签函数
function highlight(strings, ...values) {
  let result = '';
  
  // 遍历模板字符串中的每一部分
  strings.forEach((string, i) => {
    result += string;
    
    // 如果有对应的值，进行特殊处理
    if (i < values.length) {
      result += `<strong>${values[i]}</strong>`;
    }
  });
  
  return result;
}

// 使用标签模板字符串
const name = 'Alice';
const age = 25;

const message = highlight`Hello, my name is ${name} and I am ${age} years old.`;

console.log(message);
// 输出结果：Hello, my name is <strong>Alice</strong> and I am <strong>25</strong> years old.

(十三)标签模板字符串

标签模板字符串和模板字符串