ECMAScript 6 でテンプレート文字列リテラルを使用するにはどうすればよいですか?

ES6 バージョンの JavaScript では、リテラルが導入されました。 JavaScript には、オブジェクト リテラル、配列リテラル、数値リテラル、RegExp リテラルなどが含まれます。さらに、文字列リテラルも含まれます。

文字列リテラルを使用すると、バックスラッシュ文字を使用せずに複数行の文字列を作成したり、引用符で囲んで単語や文を追加したり、文字列の間に変数や数式を追加したりできます。

ユーザーは、次の構文に従って ECMAScript 6 でテンプレート文字列リテラルを使用できます。

上記の構文では、バックティック (``) を使用してテンプレート リテラル文字列を作成します。

例 1 (複数行の文字列)

次の例では、テンプレート リテラル文字列を使用して複数行の文字列を作成します。引用符で囲まれた文字列を作成するときは常に、「

」文字を使用して新しい行を作成する必要がありますが、文字列リテラルを使用すると、新しい行に文字列を記述することでそれを行うことができます。

string1 では、文字列を新しい行に記述することで新しい行が作成されますが、string2 では、「

」文字を使用して新しい行が作成されます。ユーザーは出力で string1 と string2 を確認でき、それらは同じであるように見えます。

例 2 (文字列内の引用符)

テンプレート文字列リテラルを使用して、文字列内に引用符を追加できます。二重引用符を含む文字列を作成する場合は、その文字列に一重引用符のみを追加できます。また、一重引用符を含む文字列を作成する場合は、その文字列に二重引用符のみを追加できます。

文字列リテラルを使用して、stringQuote 変数の文字列に一重引用符を追加しました。

例 3 (文字列内の変数)

次の例では、文字列内の変数置換が完了しています。一般に、文字列内で変数を使用するには、「 」演算子を使用して複数の文字列を連結する必要がありますが、テンプレート文字列リテラルを使用すると、変数を文字列内に直接追加できます。 ${} 式に変数を追加できます。

variableStr 変数の値に、name、job、timePeriod 変数を挿入しました。

例 4 (文字列の式)

この例では、テンプレート文字列リテラルを使用して文字列に数式を追加します。 sumString では、${} 内に数式を追加しました。ユーザーは、文字列内の num1 と num2 をどのように合計するかを確認できます。

さらに、string2 の 2 つの値も乗算しました。

例 5 (文字列内の HTML)

テンプレート文字列リテラルを使用して HTML 行を作成し、それを Web ページに追加できます。この例では、文字列リテラルを使用して HTML のリストを作成し、innerHTML プロパティを使用して HTML の行を Web ページに追加します。

ユーザーは、JavaScript でテンプレート文字列リテラルを使用する方法を学びました。複数行の文字列、変数と式の置換、引用符の追加、およびテンプレート文字列リテラルを使用して HTML 行を作成する方法を説明しました。

以上がECMAScript 6 でテンプレート文字列リテラルを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。