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

Answer 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!"

Answer 2

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

了解ES6标记的模板文字

2 个答案: