web-dev-qa-db-ja.com

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

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

console.log`1`

Google Chromeでは、次のような出力が得られます

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

バックティックがログ関数を呼び出すのはなぜですか。また、raw: Array[1]のインデックスを作成するのはなぜですか？

CatgocatによってJSルームで出された質問ですが、 テンプレート文字列 の問題以外に意味のある答えはありませんでした。

javascriptecmascript-6template-stringstemplate-literalstagged-templates
69
Sterling Archer

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に渡され、配列が出力されます。

54
ShrekOverflow

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

次の構文：

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回しかないため）ため、arg4を記録しようとするとundefinedが記録されます。

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

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

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

taggedTemplate `a${1}b${2}c${3}`;
taggedTemplate `a${1}b${2}c${3}d${4}`;
17
Willem van der Veen