理解 ES6 标记的模板字面量

Question

Mozilla (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 上使用了以下代码片段来解释 Tagged Template literal，请帮助我理解以下函数的作用，我无法获得函数的实际流程，因为他们使用了 keys.foreach，当我在 Chrome 中检查时，键是一个函数，所以无法理解

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`[=10=][=10=]!`;
t1Closure('Y', 'A');  // "YAY!"
var t2Closure = template`[=10=] ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

Answer 1

Template是我们定义的一个自定义的函数，用来解析模板字符串，每当一个函数被用来解析模板字符串时
标签函数的第一个参数包含一个字符串值数组。其余参数与表达式有关。
所以在这里我们专门为给定的输出编写了函数
我很困惑，因为在 forEach 中检查键时，我在控制台中得到了一个函数，但是在 forEach 给出键之前检查了函数作为第一个示例中的可配置字符串 ${0} 和 ${1} 的数组

Answer 2

示例中的大部分复杂性来自重载函数和 forEach 调用，而不是来自标记的模板文字。它最好写成两个单独的案例：

function dictionaryTemplate(strings, ...keys) {
  return function(dict) {
    var result = "";
    for (var i=0; i<keys.length; i++)
      result += strings[i] + dict[keys[i]];
    result += strings[i];
    return result;
  };
}
const t = dictionaryTemplate`[=10=] ${'foo'}!`;
t({0: 'Hello', foo: 'World'});  // "Hello World!"

function argumentsTemplate(strings, ...keys) {
  is (!keys.every(Number.isInteger))
    throw new RangeError("The keys must be integers");
  return function(...values) {
    var result = "";
    for (var i=0; i<keys.length; i++)
      result += strings[i] + values[keys[i]];
    result += strings[i];
    return result;
  };
}
const t = argumentsTemplate`[=11=][=11=]!`;
t('Y', 'A');  // "YAY!"

理解 ES6 标记的模板字面量

Understanding ES6 tagged template literal

ecmascript-6

template-literals

tagged-templates

理解 ES6 标记的​​模板字面量

Understanding ES6 tagged template literal

ecmascript-6

template-literals

tagged-templates

理解 ES6 标记的模板字面量