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

Question

考虑以下代码:

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

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

f 的参数为 ( according to Traceur ):

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

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

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

Answer 1

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

要按顺序获取各个部分，请访问 literal[0]、sub[0]、literal[1]、... ，sub[sub.length-1]，文字[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
  );
}