標記的模板文字如何在JavaScript中工作？

Question

請考慮以下代碼段：

let a = (x) => console.log(x);
a`1234`; // prints "Array [ "1234" ]"

為什么字符串在包含匿名函數的變量之后，使函數在Array中作為參數運行？ 是否有針對此行為的任何文檔參考？

另外，為什么在使用引號或雙引號來聲明字符串文字時它不起作用？

Answer 1

標記的模板文字采用(strings: string[], ...values: any[]): any 。

在你的例子中，

let a = (x) => console.log(x);
a`1234`; // prints "Array [ "1234" ]"

x的類型為string[] ，它是所有非插值字符串的數組（基本上任何不在${}內的字符串）。 因為沒有插值，所以數組包含一個元素（字符串“1234”）。 這是作為函數a的第一個參數傳遞a 。

只有模板文字可以用函數標識符“標記”，這就是為什么你注意到它不適用於單引號或雙引號字符串，只有反引號。 我認為如果您嘗試使用常規字符串，它會拋出語法錯誤，但我還沒有測試過。

如果要插值，可以通過添加附加參數來接收函數中的值（用作標記）來實現。 請注意，它不是單個參數，而是一個數組，而是單獨的參數。 當然，您可以使用擴展運算符（ ... ）從它們創建一個數組，如上面的函數簽名所示。 與MDN提供的（修改）示例一樣，

const person = 'Mike';
const age = 28;

function tag(strings, person, age) {
  const str0 = strings[0]; // "That "
  const str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // const str2 = strings[2];

  const age_description = age > 99 ? 'centenarian' : 'youngster';
  return [str0, name, str1, ageDescription].join('');
}

const output = tag`That ${person} is a ${age}`;

console.log(output); // "That Mike is a youngster"

請注意，如注釋中所示， 始終存在前導和尾隨字符串，即使它恰好為空。 因此，如果您使用插值開始模板文字，則strings[0]將為空字符串。 以相同的方式，以插值結束留下尾隨空字符串，盡管這不是顯着的（前導插值將所有索引移位一，尾隨不影響它們）。