理解 ES6 标记模板字面量答案

【问题标题】：Understanding ES6 tagged template literal理解 ES6 标记模板字面量
【发布时间】：2018-02-23 07:16:30
【问题描述】：

以下代码 sn-p 用于 Mozilla (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) 解释 Tagged Template literal，请帮助我了解以下函数在做什么，我无法获得函数的实际流程，因为他们使用了 @ 987654323@，当我在 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`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!"
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

【问题讨论】：

"当我在 Chrome 中检查时，键是一种功能" - 不。 keys 是一个数组。
是的，key 是一个数组，但不知何故，当我问问题时，我检查了键，当调试器在 forEach 中时，你无法访问键数组，如果你键入键，你会得到一个控制台功能
那么只需编写一个标准的for (let i=0; i<keys.length; i++) { const key = keys[i]; … 循环而不是forEach 调用。对模板字面量的理解没关系。
我尝试了 for 和 forEach 并使用了 console.log，在这两种情况下，我们都可以访问循环中的键，但是在尝试调试/检查时，您无法在 forEach 循环中获取键数组

标签： ecmascript-6 template-literals tagged-templates

【解决方案1】：

示例中的大部分复杂性来自重载函数和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`${0} ${'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`${0}${1}${0}!`;
t('Y', 'A');  // "YAY!"

【讨论】：

【解决方案2】：

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

【讨论】：