ES8 中新增的模板语法标签 Tagged Template-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，我们学习到了模板字符串，它允许我们将表达式插入到字符串中，使得字符串更加灵活。而在 ES8 中，我们又新增了一种标签模板的写法，可以用于处理模板字符串，这就是本文介绍的 Tagged Template。

什么是 Tagged Template

一个 Tagged Template 可以被看作是一个函数调用的语法糖，它可以接收一个数组和若干个参数，其中数组中存储了分离了插值部分和纯字符串的模板字符串，而参数则是插入到模板字符串中的表达式的值。比如：

function myTag(strings, ...values) {
  // strings: ['Hello, ', '!']
  // values: ['world']
  console.log(strings[0], values[0], strings[1]); // Hello, world !
}
let value = 'world';
myTag`Hello, ${value}!`;

可以看到，myTag 函数接收的第一个参数是一个数组 strings，它是模板字符串中没有插值的部分，将模板字符串分为了多段。第二个参数则是一个 rest 参数 values，它存储了模板字符串中的插值表达式的值，按照顺序排列。需要注意的是，rest 参数 values 的个数会比插值表达式的个数多一个，因为字符串的个数比表达式的个数多1。

通过 Tagged Template，我们可以对模板字符串和插入表达式的各部分进行处理，从而满足各种使用场景的需求。

Tagged Template 的应用

字符串格式化

Tagged Template 可以用于更好地格式化字符串。比如，我们可以用一个 toDollar 函数将输入的数字转换为货币格式：

// javascriptcn.com 代码示例
function toDollar(strings, ...values) {
  let str = '';
  for (let i = 0; i < strings.length; i++) {
    str += strings[i];
    if (i < values.length) {
      str += `$${values[i].toFixed(2)}`;
    }
  }
  return str;
}
let price = 24.99;
console.log(toDollar`The price is ${price}.`);
// 输出：The price is $24.99.

上面的 toDollar 函数接收模板字符串的分离数组和插值表达式的值。在处理模板字符串时，toDollar 函数会将插值表达式的值变成适当的货币格式，并将其合并到字符串中。

标记模板的默认值

Tagged Template 还可以指定一个默认的 tag function。在只传入模板字符串时，就会调用这个默认的 tag function。比如下面的代码中，当没有传入标记函数实现 toUpper 时，则使用默认的标记函数进行处理：

// javascriptcn.com 代码示例
function toUpper(strings, ...values) {
  let str = '';
  for (let i = 0; i < strings.length; i++) {
    str += strings[i];
    if (i < values.length) {
      str += values[i].toUpperCase();
    }
  }
  return str;
}
let toUpperDefault = String.raw; // 使用原生的 String.raw 函数作为默认的标记函数
let name = 'John';
console.log(toUpperDefault`${name}`); // JOHN

上面的代码中，toUpperDefault 函数使用原生的 String.raw 函数作为默认的标记函数，在字符串中插入的字符串会原样输出，并不会被处理。

模板字符串的本地化处理

Tagged Template 还可以用于将模板字符串的本地化处理。如果我们要将一个字符串翻译成多个语言，只需要写一个 tag function 并在不同的语言中对其进行翻译即可。比如下面的代码中，我们定义了一个 translate 函数，它接收一个 strings 和一个键值对的 arguments 对象，其中 arguments 存储了不同语言的翻译：

// javascriptcn.com 代码示例
function translate(strings, ...values) {
  return strings.reduce((acc, str, i) => {
    let value = values[i] || '';
    return acc + str + value;
  }, '');
}

let lang = 'zh-CN';
let messages = {
  'en-US': {
    hello: 'Hello',
    name: 'world',
    bye: 'Bye',
  },
  'zh-CN': {
    hello: '你好',
    name: '世界',
    bye: '再见',
  }
}
let trans = (key, args) => translate`${messages[lang][key]}, ${args}`;
console.log(trans('hello', { name: 'Carl' }));  // 你好, { name: Carl }
console.log(trans('bye', { name: 'Jack' }));  // 再见, { name: Jack }

在上面的代码中，我们使用了 translate 函数将模板字符串进行了翻译。在模板字符串中，我们使用了 ${messages[lang][key]} 来获取翻译的结果，而名为 args 的参数则会在翻译结果中被插入。

总结

Tagged Template 是 ES8 中的一个新特性，它可以用于更好地处理模板字符串和插值表达式，从而满足不同的需求。本文介绍了 Tagged Template 的基本使用方式，并通过几个实例展示了它的实际应用。希望读者能通过本文的介绍，更好地理解和掌握 Tagged Template 的使用方法，从而在实际工作和学习中更加得心应手。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653643d17d4982a6ebe4063d