JavaScript - 模板字面量（Template Literals）的使用

---

---

主要参考

• Template literals (Template strings) - JavaScript | MDN

---

模板字面量（Template Literals）

• 之前也被称作模板字符串（Template Strings），作为JavaScript中string类型的一种表现形式，在ES2015后得到支持。

• 直观区别于通常的字符串表现形式，模板字面量使用反引号```（back-tick）包裹，并允许字符串中的内嵌表达式。

多行文本表示

• 一般字符串需要换行时，需明确插入换行符，如下：

  console.log('string text line 1\n' + 
  'string text line 2');
  // string text line 1
  // string text line 2

• 而使用模板字面量时，由于任何换行符都被包含在模板字面量中，因此可直接通过字符串的换行进行表示：

  console.log(`string text line 1
  string text line 2`);
  // string text line 1
  // string text line 2

  当然，使用换行符也是允许的：

  console.log(`string text line 1 \n string text line 2`);
  // string text line 1
  // string text line 2

内嵌表达式

通过语法糖（${expression}）使字符串中表达式的嵌入更加便捷可读：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// Fifteen is 15 and
// not 20.

模板嵌套

可简单通过占位符${ }的直接嵌套，来更为可读地表现字符串中的可配置字段，如下：

const classes = `header ${ isLargeScreen() ? '' : `icon-${ item.isCollapsed ? 'expander' : 'collapser' }` }`;

标签模板

简单地说，就是以函数形式来解析模板字面量，可从具体应用来反向理解此功能：

• 实际应用中出现以下形式地模板字面量使用场景：

  var person = 'Mike';
  var age = 28;
  
  function myTag(strings, personExp, ageExp) {
      // ... 暂时省略标签函数定义
  }
  
  var output = myTag`That ${ person } is a ${ age }`;
  // That Mike is a youngster

  对比output赋值中模板字面量的应用形式及最终实际输出，可猜测是将person和age作为标签函数myTag()的参数，经过处理后输出为${ person }与${ age }的结果嵌入字符串中；

• 再具体来看标签函数myTag()的参数列表与具体定义：

  function myTag(strings, personExp, ageExp) {
      var str0 = strings[0]; // That
      var str1 = strings[1]; // is a
  
      var ageStr;
      if(ageExp > 99) {
          ageStr = 'centenarian';
      } else {
          ageStr = 'youngster';
      }
  
      return `${ str0 }${ personExp }${ str1 }${ ageStr }`;
  }

  • 由上面最后一句可见，之前的猜测有误，最终应当是将标签函数myTag()的返回值整体输出

  • 第一个参数strings表示是模板字面量中的一般字符串数组；

  • 后续参数，依次表示模板字面量中的嵌入表达式

• 当然，标签函数的返回值并不一定得是字符串，下面这个示例中，返回值实际为一个实现简易键值对查询的函数：

  function template(strings, ...keys) {
      return (function(...values) {
          var dict = values[values.length - 1] || {};
          var result = [strings[0]];
          keys.forEach(function(key, i) {
              var value = Number.isInteger(key) ? values[key] : dict[key];
              result.push(value, strings[i + 1]);
          });
          return result.join('');
      });
  }
  
  var t1Closure = template`${0}${1}${0}!`;
  t1Closure('Y', 'A'); // "YAY!"
  var t2Closure = template`${0} ${'foo'}!`;
  t2Closure('Hello', { 'foo' : 'World' }); // "Hello World!"

  • 关注参数列表中的...keys形式，ES2015后支持的扩展运算符，可理解为将参数序列表示为一个数组形式。上例中的...keys在t1Closuer调用时，就等价于keys = [0, 1, 0]；

  • 上例中的标签函数template()实际返回的是一个闭包函数，再经闭包函数处理后组合成字符串输出结果

---

转载于:https://www.cnblogs.com/JustBeZero/p/9673622.html