関数を呼び出すバックティック


93

これを説明する方法がわかりませんが、実行すると

console.log`1`

グーグルクロームでは、私は次のような出力を取得します

console.log`1`
VM12380:2 ["1", raw: Array[1]]

バッククォートがlog関数を呼び出すのはなぜraw: Array[1]ですか?また、インデックスを作成するのはなぜですか?

CatgocatによってJSルームで質問が提起されましたが、なぜこれが起こっているのか実際には合わない文字列のテンプレート化に関するもの以外に、答えは意味がありませんでした。


回答:


67

ES-6ではタグ付きテンプレートと呼ばれています。それらについてもっと読むことができます。ここで面白いことに、チャットのスター付きセクションにリンクが見つかりました。

ただし、コードの関連部分は以下のとおりです(基本的にフィルターされたソートを作成できます)。

function tag(strings, ...values) {
  assert(strings[0] === 'a');
  assert(strings[1] === 'b');
  assert(values[0] === 42);
  return 'whatever';
}
tag `a${ 42 }b`  // "whatever"

基本的には、他の関数と同様に、console.log関数で「1」にタグを付けるだけです。タグ付け関数は、テンプレート文字列の解析された値と、さらにタスクを実行できる値を個別に受け入れます。

Babelは上記のコードをに変換します

var _taggedTemplateLiteralLoose = function (strings, raw) { strings.raw = raw; return strings; };

console.log(_taggedTemplateLiteralLoose(["1"], ["1"]));

上記の例でわかるように、babelによってトランスパイルされた後、タグ付け関数(console.log)に次のes6-> 5トランスパイルコードの戻り値が渡されます。

_taggedTemplateLiteralLoose( ["1"], ["1"] );

この関数の戻り値はconsole.logに渡され、console.logが配列を出力します。


10
説明がはるかに理解しやすいことがわかりました-wesbos.com/tagged-template-literals–
Dave Pile

34

タグ付きテンプレートリテラル:

次の構文:

function`your template ${foo}`;

タグ付きテンプレートリテラルと呼ばれます。


タグ付きテンプレートリテラルとして呼び出される関数は、次の方法で引数を受け取ります。

function taggedTemplate(strings, arg1, arg2, arg3, arg4) {
  console.log(strings);
  console.log(arg1, arg2, arg3, arg4);
}

taggedTemplate`a${1}b${2}c${3}`;

  1. 最初の引数は、すべての個々の文字列文字の配列です
  2. 残りの引数は、文字列補間を介して受け取る変数の値に対応します。この例では、の値がないためarg4(文字列補間は3回しかないため)、undefinedログに記録しようとするとログに記録されることに注意してください。arg4

残りのパラメーター構文の使用:

テンプレート文字列で文字列補間が何回行われるかが事前にわからない場合は、restパラメータ構文を使用すると便利なことがよくあります。この構文は、関数が受け取る残りの引数を配列に格納します。例えば:

function taggedTemplate(strings, ...rest) {
  console.log(rest);
}

taggedTemplate `a${1}b${2}c${3}`;
taggedTemplate `a${1}b${2}c${3}d${4}`;

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.