ES8 中的 String 替代方案：tagged template literals-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要拼接字符串。在 ES6 之前，我们使用字符串拼接或者字符串模板来实现。ES6 中引入了模板字符串，让字符串的拼接更加简单和可读性更高。而在 ES8 中，另一种字符串替代方案也被引入——tagged template literals。

什么是 tagged template literals？

tagged template literals 是一种新的字符串替代方案，它使用一个函数（tag function）来处理字符串模板。在这个函数中，我们可以对字符串进行任意操作，并返回处理后的字符串。

tagged template literals 的语法如下所示：

tag`string text ${expression} string text`

其中 tag 是一个函数，后面紧跟的是用反引号括起来的字符串模板。字符串模板中可以包含普通字符串和占位符（${expression}），占位符中的表达式会被求值后转换为字符串。

当 template literals 被解析成字符串后，会被传递给 tag function，作为它的参数。tag function 可以对字符串进行任意处理，并返回处理后的字符串。

tagged template literals 的用途

tagged template literals 可以用于各种字符串处理场景，如国际化、模板渲染、代码生成等。

国际化

在国际化中，我们常常需要将字符串翻译成多种语言。使用 tagged template literals 可以轻松实现这一功能。

我们可以定义一个翻译函数（如下所示），它将当前语言下的文本替换成对应翻译。

// javascriptcn.com 代码示例
const en = { hello: 'hello', name: 'name' };
const zh = { hello: '你好', name: '名字' };

function translate(strings, ...expressions) {
  let result = '';
  for (let i = 0; i < expressions.length; i++) {
    result += strings[i];
    result += expressions[i];
  }
  result += strings[strings.length - 1];

  // 翻译字符串
  result = result.replace('hello', en.hello).replace('name', en.name);

  return result;
}

const greeting = 'hello';
const name = 'world';

const message = translate`${greeting}, ${name}!`;

console.log(message); // 输出：'hello, world!'

模板渲染

我们可以使用 tagged template literals 实现一个简单的模板引擎，来将数据渲染到 HTML 模板中。

// javascriptcn.com 代码示例
const data = { name: 'world', age: 18 };

function render(strings, ...expressions) {
  let result = '';
  for (let i = 0; i < expressions.length; i++) {
    result += strings[i];
    result += expressions[i];
  }
  result += strings[strings.length - 1];

  // 将占位符替换成数据
  Object.keys(data).forEach(key => {
    const re = new RegExp(`{{\\s*${key}\\s*}}`, 'g');
    result = result.replace(re, data[key]);
  });

  return result;
}

const template = `
  <div>
    <h1>{{name}}</h1>
    <p>Age: {{age}}</p>
  </div>
`;

const html = render(template);

console.log(html);
// 输出：
// <div>
//   <h1>world</h1>
//   <p>Age: 18</p>
// </div>

代码生成

我们可以使用 tagged template literals 生成代码，如下所示。

// javascriptcn.com 代码示例
function generateCode(strings, ...expressions) {
  let result = '';
  for (let i = 0; i < expressions.length; i++) {
    result += strings[i];
    result += expressions[i];
  }
  result += strings[strings.length - 1];

  // 生成代码
  const code = `
    (function() {
      ${result}
      return ${expressions[0]};
    })()
  `;

  return code;
}

const x = 1;
const y = 2;

const code = generateCode`${x} + ${y}`;

console.log(eval(code)); // 输出 3

总结

tagged template literals 是一种强大的字符串替代方案，它可以用于各种字符串处理场景，如国际化、模板渲染、代码生成等。tagged template literals 将字符串模板和函数绑定在一起，让我们可以对字符串进行任意操作。

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