标记模板中是否合并了同级替换？

Question

考虑以下因素：

String.raw`Test ${123}${'abc'}`;
String.raw`Test ${123 + 'abc'}`;

${123}${'abc'}是否等同于${123 + 'abc'}？换句话说，ciblings是否在幕后转换为${123 + 'abc'}格式？

此外，有人会如何在他们自己的标记模板函数中处理这种特定情况？

Answer 1

与 String.raw 的行为基本相同。它和 +（带有字符串值）都执行连接，获得相同的结果。

它们之间的区别在于第一行延迟 String.raw 的连接执行，${123} 和 ${'abc'} 作为单独的参数提供给它。

在使用 + 时，总是预先执行连接，仅将单个值传递给 String.raw for ${123 + 'abc'}。

function foo(template, ...values) {
  console.log(template, values);
}

foo`Test ${123}${'abc'}`; // [ 'Test ', '', '' ] [ 123, 'abc' ]
foo`Test ${123 + 'abc'}`; // [ 'Test ', '' ]     [ '123abc' ]

对于其他标记函数，差异可能更明显，因为该函数可能在连接之前（或之外）执行其他操作。

一个人为的例子：

// adds 99999 to each value
function bar(template, ...values) {
  var raw = template.raw;
  var result = raw[0];

  values.forEach((value, i) => {
     result += value + 99999;
     result += raw[i + 1];
  });

  return result;
}

console.log(bar`Test ${123}${'abc'}`); // 100122abc9999
console.log(bar`Test ${123 + 'abc'}`); // 123abc99999

标记模板中是否合并了同级替换？

Are sibling substitutions combined in tagged templates?

javascript

ecmascript-6

template-literals

tagged-templates