5

テンプレート リテラルをパラメーターとして使用する場合、ES6 では括弧なしで関数呼び出しを行うことができることを最近知りました。例えば

showstring`Hello World`;

ただし、この機能に関するいくつかの記事を読んだ後、JS がこれらの呼び出しを処理する方法の背後にあるロジックに関する情報はほとんど得られませんでした。

コードのいくつかの順列をいじった後、関数内でテンプレート リテラルがどのように呼び出されたときにどのように分割されるかのパターンをまとめるのにまだ苦労しています。

const showstring = (str) => {
  console.log(str);
}
showstring`Hello World`;

上記のコードで何が起こるかは簡単です。文字列リテラルは、最初で唯一の要素が文字列である配列として受け取られます。

少し混乱するのは、テンプレート内で式を使い始めるとです。例えば

const showstring = (str, ...values) => {
  console.log(str);
  console.log(values)
}
const name = 'John'
showstring`Hello World ${name} ${name} ${1 + 2} and more`;

...valuesそのため、パーツがすべての式を分解しているように見えます。しかし、なぜstr配列のそれらの場所に空の文字列があるのでしょうか?

ここで従うパターンを完全には把握していません。誰かがこの機能を説明できますか? または、良い記事を教えてください。

4

1 に答える 1

6

2 番目のコード スニペットでは、これらがログに記録されます。

// str
[
  "Hello World ",
  " ",
  " ",
  " and more"
]

// values
[
  "John",
  "John",
  3
]

これらの「空の文字列」がstr配列の 2 番目と 3 番目の項目を意味する場合、それらは空の文字列ではありません。それらは単一のスペースを含む文字列です。これらは、テンプレート リテラルの式の間のスペースから取得されます。

showstring`Hello World ${name} ${name} ${1 + 2} and more`;
//                            ^       ^

テンプレート リテラルの前に式が続く場合 (この場合)、タグ付きテンプレートshowstringと呼ばれます。

showstring関数には、配列strよりも常に 1 つ多くの項目が含まれます。valuesたとえば、これらのログを見てみましょう:

const showstring = (str, ...values) => {
  console.log(str);
  console.log(values)
}
const name = 'John'
showstring``;
showstring`${name}`;
showstring`Hello ${name}!`;

これは関数に固有のものではありません。これがタグ付きテンプレートの仕組みです。せっかちなプログラマーのための JavaScript (ES2020 版)の本のタグ付きテンプレートセクションから:

最初のバッククォートの前の関数をタグ関数と呼びます。その引数は次のとおりです。

  • テンプレート文字列(最初の引数): 補間を囲むテキスト フラグメントを含む配列${}。
  • Substitutions (残りの引数): 補間された値。

あなたのコメントについて:

ただし興味深いことに、関数を呼び出すときに式の間にいくつのスペースを入れても、その単一のスペースは常に単一のスペースのままです。なぜそれが1つのスペースだけにトリミングされるのか考えていますか?

そうではないようです。これは、3 つのスペースを含む文字列をログに記録します。

const showstring = (str, ...values) => {
  console.log(str);
  console.log(values)
}
const name = 'John'
showstring`Hello ${name}   ${name}!`;

結果を DOM に出力していたのでしょうか。<pre>複数のスペースは、または類似のものを使用していない限り、1 つとして表示されるwhite-space: pre;ため、結果が 1 つのスペースだけにトリミングされているように見える場合があります。

于 2021-01-16T07:51:19.880 に答える