TIL：标记函数/标记模板文字

概述 ？

标记函数，也称为标记模板文字，是 ES6（2015）中引入的模板文字的高级功能。它们可以更好地控制模板文字的处理方式，允许自定义格式、解析甚至验证。

标记模板文字的一个流行用例是在 GraphQL 中动态构建查询字符串。

---

句法

定义

标记模板文字是“标记函数”和模板文字的组合。标签函数接收文字的字符串和插值作为参数，从而启用自定义处理。

这是一个基本示例：

const bar = "var bar";

function tag(strings, ...values) {
  console.log(strings); // Array of string literals
  console.log(values);  // Array of interpolated values
}

用法

tag`foo ${bar} baz`;

// Output:
// ['foo ', ' baz']  // Array of strings
// ['var bar']       // Array of values

---

使用案例

1.国际化（i18n）

标记模板文字可用于动态处理字符串以进行本地化。

示例：

function i18n(strings, ...values) {
  const translations = {
    "Hello, ": "Hola, "
  };

  return strings.reduce((acc, str, i) => {
    const translatedStr = translations[str] || str; // Translate if possible
    return acc + translatedStr + (values[i] || '');
  }, '');
}

const name = "Alice";
const result = i18n`Hello, ${name}!`;
console.log(result);
// Output: "Hola, Alice!"

2.GraphQL

在 GraphQL 中，标记模板文字广泛用于定义和操作查询字符串。

示例：

const query = gql`
  query {
    user(id: 1) {
      name
      age
    }
  }
`;

3. 使用标记模板文字处理参数

标记模板文字还可以通过将附加值传递给标签函数并在模板文字中应用函数来处理参数。

示例：

function tagged(baseValue) {
  return function(strings, ...functions) {
    return strings.reduce((acc, str, i) => {
      const value = typeof functions[i] === 'function' ? functions[i](baseValue) : '';
      return acc + str + value;
    }, '');
  };
}

const result = tagged(2)`foo${n => n * 0}bar${n => n * 1}baz${n => n * 2}`;
console.log(result);
// Output:
// "foo0bar2baz4"

---

讨论和见解？

标记模板文字支持使用自定义逻辑进行动态字符串处理，使其成为查询构建、国际化和输入清理等用例的理想选择。它们提高了代码的可读性和可维护性，特别是在需要高级字符串操作的场景中。

---

参考

• MDN 网络文档：标记模板
• ES6 规范
• GraphQL 官方文档
• 标记模板文字の TypeScript 推论

以上是TIL：标记函数/标记模板文字的详细内容。更多信息请关注PHP中文网其他相关文章！