JavaScript バッククォート: 文字列補間またはタグ付きテンプレート関数?

JavaScript のバッククォート: 関数呼び出しまたは文字列のタグ付け?

JavaScript でバッククォート (...) を使用すると、予期しない動作が発生する可能性があります内部に単一のパラメータを指定して console.log を実行する場合などバッククォート:

console.log`1`;

次のような出力を生成します:

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

タグ付きテンプレートについて

この動作は、で導入されたタグ付きテンプレートの概念から生じます。 ES6。タグ付きテンプレートは、文字列リテラルを操作するためにバッククォートとともに使用できる関数です。タグ付きテンプレートが呼び出されると、次の 2 つのパラメータを受け取ります:

• strings: 文字列リテラルの配列
• ...values: 文字列リテラル内に埋め込まれた値の配列

関数呼び出しとタグ付け

バッククォートを含む console.log の場合、バッククォートは関数を呼び出しません。代わりに、console.log 関数を使用して文字列リテラル「1」をタグ付けしています。結果のタグ付きテンプレート関数は、変換された値を含む配列を返します。

具体的には:

• strings[0] には文字列リテラルが含まれます: "1"
• strings[ 1] は未定義です
• values[0] には埋め込み値が含まれます。 1
• raw には、変換されていない文字列リテラルが含まれています: ["1"]

トランスパイル

最新のブラウザは、互換性を持たせるために ES6 コードをトランスパイルします。古い JavaScript バージョンを使用している場合。この場合、タグ付きテンプレート関数は通常の関数呼び出しにトランスパイルされます。

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

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

_taggedTemplateLiteralLoose 関数は、配列を出力する console.log 関数に渡される配列を返します。

結論

JavaScript ではバッククォートが使用できます文字列補間とタグ付きテンプレートの両方に適用されます。タグ付きテンプレート関数と一緒に使用すると、関数は文字列リテラルの解析された値と埋め込み値を受け取り、出力する前にデータの操作と変換が可能になります。

以上がJavaScript バッククォート: 文字列補間またはタグ付きテンプレート関数?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。