JavaScriptでES6テンプレートリテラルを使用する方法

プログラミングでは、用語 “リテラル” を参照 値の表記 コードで。例えば、文字列値を 文字列リテラル 二重引用符または一重引用符で囲まれた文字「foo」, 'バー', 「これは文字列です！」）.

テンプレートリテラル で紹介された ECMAScript 6. それらは文字列リテラルと非常によく似た働きをします。彼らが生み出します テンプレート値 そして 生のテンプレート値, どちらも文字列.

ただし、文字列リテラルとは異なり、テンプレートリテラルは以下の値を生成できます。 複数行ストリング, 文字列リテラルでしか達成できないもの 改行文字を追加する （\ nそれに）.

テンプレートリテラルも可能 他の値で文字列を作成する （式から導き出される） プラス演算子 文字列リテラル内（"あなたのIDは：" + idNo;どこで アイディー番号 数値を含む変数式です。.

これらすべての機能により、テンプレートリテラルは次のものよりも好まれています。 文字列値を作成する.

テンプレートリテラルの構文

テンプレートリテラルの区切り文字は バックティック ' キャラクター （逆引用符または重大なアクセント記号としても知られています）。リテラル内の式（その値は 実行時に評価 リテラルによって生成された最終値に含まれる 中括弧 とともに 先行ドル記号 $.

 'string $ someExpressionより多くの文字列'

ここにあるいくつかの テンプレートリテラルの例 作り出す 変わらない, 代用（式はその評価値に置き換えられます） 複数行 ひも.

 console.log（ 'hello'）; // hello var name = "Joan"; console.log（ 'hello $ name'）; // Hello Joan console.log（ '親愛なるジョーン、ようこそ。'）; // Joanさん、//ようこそ.

エスケープと生のテンプレート値

テンプレートリテラルでは、 ' （バックティック）, \ （バックスラッシュ） $ （ドル記号）文字 エスケープする必要があります を使用して エスケープ文字 \ テンプレート値に含める場合.

デフォルトでは、テンプレートリテラル内のすべてのエスケープシーケンスは 無視された. あなたがそれを出力に含めたいのなら、あなたはそれを使う必要があります。 生のテンプレート値.

 console.log（ 'マークアップ内のインラインコード：\' code \ "）; //マークアップ内のインラインコード： 'code' var name =" Joan "; console.log（ 'hello \ $ name。'）; / / hello $ name。console.log（String.raw'hello \ $ name。 '）; // hello \ $ name.

の String.raw 方法 生のテンプレート値を出力する （テンプレートリテラルの生の文字列形式）上記のコードでは、の関数呼び出し 生 方法はと呼ばれる “タグ付きテンプレート”.

タグ付きテンプレート

タグ付きテンプレートは 関数呼び出し どこで, 通常の括弧の代わりに 関数名以外に（オプションのパラメータを使って）, テンプレートリテラルがあります 関数は引数を取得します.

だから、このような関数を呼び出す代わりに：

 foo（ArgumentsForFoo）;

これは次のように呼ばれます。

 foo'ATemplateStringProvidingArgumentsForFoo ';

関数 フー と呼ばれる タグ機能. テンプレートリテラルから受け取った最初の引数は アレイ と呼ばれる テンプレートオブジェクト.

テンプレートオブジェクト（配列）は すべての文字列値 テンプレートリテラルから解釈され、 生 保持するプロパティ（別の配列） すべての生の（エスケープされていない）文字列値 同じリテラルから解釈された.

テンプレートオブジェクトに続いて、tag関数の引数は次のとおりです。 全ての 評価済み 外部値 そのリテラル（中括弧で囲まれたもの）に存在する $ ）.

以下のコードでは、 フー 関数を作成する 引数を出力する. その後関数が呼び出されます タグ付きテンプレート方式で, 2つの式を持つテンプレートリテラルを使って（名 そして id）.

 var name = "John"; var id = 478。 foo'hello $ nameあなたのIDは$ idです。関数foo（）console.log（引数[0]）; // Array ["hello"、 "。あなたのIDは"、 "。" ] console.log（引数[1]）。 // John console.log（arguments [2]）; // 478

出力される最初の引数は テンプレートオブジェクト テンプレートリテラルから解釈されたすべての文字列を持って、2番目と3番目の引数は 評価値 式の, 名 そして id.

の `生` 財産

前述のように、テンプレートオブジェクトには プロパティと呼ばれる 生 これは次のものを含む配列です。 すべての生の（エスケープされていない）文字列値 テンプレートリテラルから解釈されます。これはあなたがにアクセスする方法です。 生 プロパティ：

 var name1 = "John"、name2 = "Joan"; '; foo'hello \ $ name1、$ name2、お元気ですか。関数foo（）console.log（引数[0]）; // Array ["hello $ name1、"、 "お元気ですか？"] console.log（arguments [0] .raw）; // Array ["hello \ $ name1、"、 "、お二人ともお元気ですか？"] console.log（arguments [1]）; //ジョアン

タグ付きテンプレートの使用例

タグ付きテンプレートは、必要なときに役立ちます。 文字列を分割する URLの場合や言語の解析中によくあることです。あなたはのコレクションを見つけるでしょう タグ付きテンプレートの例はこちら.

IE以外のテンプレートリテラルは すべての主要ブラウザでサポートされています.

以下に、タグ関数のいくつかの例があります。 異なる署名 それは引数を表します。

 var name = "John"; foo'hello $ name、お二人ともお元気ですか？ bar'hello $ name、お元気ですか？ function foo（…args）console.log（args）; // Array [Array ["hello"、 "、お元気ですか？]]、" John "]関数バー（strVals、…exprVals）console.log（strVals）; // Array ["こんにちは"、 "お元気ですか？ console.log（exprVals）; // Array ["John"]

の中に バー 関数、最初のパラメータ（strVals）それは テンプレートオブジェクト そして2番目のもの（これは拡散構文を使用します）は集められた配列です。 評価されたすべての式の値 関数に渡されたテンプレートリテラルから.

弦をまとめる

あなたがしたい場合は 文全体を入手する タグ関数内の（リテラルから派生）, すべての値を連結する テンプレート文字列と評価された式の値を運ぶ配列の。このような：

 function foo（strs、…exprs）//リテラルに式が含まれる場合if（exprs.length！== 0）var n = strs.length  -  1、result = "; for（var i = 0） ; 私 < n; i++)  result += strs[i] + exprs[i];  result += strs[n]; console.log(result); //"Hello John."  // if there are no expressions included in the literal else console.log(strs[0]);  name = 'John'; foo'Hello $name.';

の strs 配列保持 すべての文字列 文字通りに見つけられる exprs 保持する 評価されたすべての式の値 リテラルから.

式の値が1つでも存在する場合は、の各配列値を連結します。 strs 同じインデックス値の（最後のものを除く） exprs. そして最後に、の最後の値を追加します。 strs 連結文字列への配列, 完全な文を形成する こちらです.