ES6 で追加された新しい要素は、テンプレート リテラルです。複数行の文字列を作成したり、文字列に式を含める機能など、いくつかの重要な新機能を追加する JavaScript で文字列を作成するための新しい型です。開発者は、これらすべての機能により、文字列を操作し、動的文字列を作成できるようになります。
この投稿では、テンプレート リテラルと JavaScript での使用方法について説明します。
JavaScript テンプレート リテラル (テンプレート文字列) とは?
「 テンプレート リテラル 」は一般的に「」として知られています テンプレート文字列 」。それらはバッククォート ( 「 ) 文字、文字列の引用符と比較して。そのプレースホルダーはドル記号「 $ 」、中括弧 {} お気に入り ' ${式} 」は、テンプレート リテラルで使用できます。式を使用したい場合は、「 ${式} 」 バッククォート内のボックス。
テンプレート リテラルは、標準の JavaScript 文字列の改良版です。置換は、テンプレート リテラルと通常の文字列を大きく区別します。置換を使用して、変数と式を文字列に統合できます。これらの変数と式の値は、JavaScript エンジンによって自動的に置き換えられます。
構文
テンプレート リテラルを使用して単一の文字列を宣言するには、次の構文を使用します。
` 文字列テキスト `
複数行の場合は、次の構文に従います。
` 文字列テキスト行 1
文字列テキスト行
バッククォート内に式を追加する場合は、次の構文が使用されます。
以下の例を確認して、記載されている概念をよりよく理解してください。
例 1: JavaScript テンプレート リテラルを使用して 1 行の文字列を宣言する
通常、文字列を作成するには、一重引用符または二重引用符を使用する必要がありますが、テンプレート リテラルでは、次のように文字列を作成できます。
console.log ( ` Linuxヒント ` ) ;
出力は、一重引用符または二重引用符を使用した単純な文字列の作成と同じように機能することを示しています。
例 2: JavaScript テンプレート リテラルを使用して複数行の文字列を宣言する
通常、複数の行を出力するには、連結演算子 (+) を使用し、新しい行を追加するには (\n) を使用できます。これにより、コードが複雑になることがよくあります。
console.log ( 「Linuxヒントへようこそ。 \n ' + 「スキルを学ぶのに最適なウェブサイト。」 ) ;
テンプレート リテラルを使用している間は、バッククォート ブロックでキーボードから Enter キーを押して新しい行を開始できます。
最高のウェブサイト 為に 学習スキル。 ` ) ;
出力
例 3: 式の置換を含む文字列
ここでは、まず2つの変数を作成します」 バツ ' と ' よ 」、値とともに「 20 ' と ' 15 '、 それぞれ：
変数 x = 20 ;変数 y = 15 ;
次に、変数を作成します “ 和 」を追加するための「 バツ ' と ' よ 」：
2 つの数値を加算し、これらの数値の合計をコンソールに表示する場合、通常、文字列と変数を通常の文字列形式で連結する必要があります。これにより、文字列で一重引用符または二重引用符を繰り返し使用して結合することがよくあります。相互に、および ( を使用して変数と + ):
一方、テンプレート リテラルを使用すると、変数を含む文字列を ' 内の式として指定するだけで済みます。 ${} 」 バッククォート ブロック内:
出力
テンプレート リテラルに関連するすべての重要な情報を収集しました。
結論
「 テンプレート リテラル '、 としても知られている ' テンプレート文字列 」は、バッククォート ( 「 ) 文字、文字列の引用符と比較して。連結演算子を使用せずに単一行および複数行の文字列を作成でき、文字列に式が含まれます。この投稿では、JavaScript のテンプレート リテラルについて説明し、例を示しました。