javascript - ES6 标记的​​模板函数如何解释它们的参数顺序？

Question

考虑以下代码：

function f() {
  console.log(Array.from(arguments));
}

var x = 2;
var y = 3;
f`before ${x} ${y} after`;

的论点f将是（根据 Traceur）：

["before ", " ", " after"], 2, 3

假设我想将所有文字字符串与替换值连接起来。
我该如何以正确的顺序执行此操作？

我需要先将第一个数组中的“分割点”与每个参数匹配吗？

Answer 1

根据 ECMAScript 6 规范草案的 wiki，它更复杂，因为模板考虑了转义序列：

模板

quasiTag`literalPortion\0 $x literalPortion1`

会脱糖

// Declaration hoisted to top of module.
// Escape sequences in the hoisted declaration are not decoded according to CV(EscapeSequence).
// The calls to Object.freeze use the original definition of that method.
const unguessableCallSiteId1234 = Object.freeze({
  raw: Object.freeze(["literalPortion\\0 ", "literalPortion1"]),
  cooked: Object.freeze(["literalPortion\u0000 ", "literalPortion1"])
});

...

  // In-situ
  // Escape sequences in the arguments are decoded.
  // unguessableCallSiteId1234 is ideal as a key into a weak map used to memoize
  // extraction of meta-data, custom escaping conventions, and other state
  // that can be derived from the literal portions, so does not vary from
  // call to call from the same call-site.
  quasiTag(unguessableCallSiteId1234, x)

EcmaScript Quasi-Literals - 去糖

所以arguments应该包含你在 traceur 中看到的替换值，但文字部分是一个对象而不是数组。

如果您想为使用 traceur 编译的代码实现它，您可以执行以下未优化示例中的操作。

let concatenated = "";
Array.forEach(args[0], (e, i) =>
    concatenated += e + ( i < arguments.length - 1 ? arguments[i+1] : "")
);

对于真正的 ECMAScript 6 代码，请查看Default Quasi Tag实现，正如 bergi 在评论中所建议的那样。

Answer 2

总是比替换多一个字面部分。第一个文字是模板的第一部分（如果以替换开头，则为空字符串），最后一个文字是模板字符串的尾部（或者，如果以替换结尾，则为空字符串）。

要按顺序排列零件，请访问literal[0], sub[0], literal[1], ..., sub[sub.length-1], literal[sub.length].

这是一个简单的起点：

function simpleTag(lit, ...sub) {
  return sub.reduce(
    // Add next substition and following literal
    (soFar, s, i) => soFar + s + lit[i+1],
    lit[0] // Start with the first literal
  );
}