Image

TECH I.S.

TECH I.S
TECH I.S
TECH I.S
TECH I.S

JavaScript テンプレートリテラル

同義語:

・テンプレートリテラル
・テンプレート文字列
・文字列テンプレート
・バックティックの構文


バックティックの構文

テンプレートリテラル文字列を定義するには、引用符("")ではなくバッククォート (``) を使用します。

例

let text = Hello World!;

文字列内の引用

テンプレートリテラルを使用すると、文字列内で一重引用符と二重引用符の両方を使用できます。

例

let text =He's often called "Johnny";

複数行の文字列

テンプレート リテラルでは、文字列内の変数を許可します。

例

let text = The quick brown fox jumps over the lazy dog;

補間

テンプレートリテラル変数と式を文字列に挿入する簡単な方法を提供します。

この方法は文字列補間と呼ばれます。

構文は次のとおりです。

${...}

変数置換

テンプレートリテラル文字列内の変数を許可:

例

let firstName = "John"; let lastName = "Doe"; let text = Welcome ${firstName}, ${lastName}!;

文字列補間では、変数を実際の値に自動置換する機能が呼び出されます。

式の置換

テンプレートリテラルでは、文字列での式を許可します。

例

let price = 10; let VAT = 0.25; let total = Total: ${(price * (1 + VAT)).toFixed(2)};

文字列補間では、実数値による式の自動置換が呼び出されます

HTMLテンプレート

例

let header = "Templates Literals"; let tags = ["template literals", "javascript", "es6"]; let html = <h2>${header}</h2><ul>; for (const x of tags) {   html += <li>${x}</li>; } html += </ul>;

ブラウザのサポート

テンプレートリテラルはES6からの機能(JavaScript 2015)です 。

最新のすべてのブラウザーでサポートされています。

Chrome Edge Firefox Safari Opera
はい はい はい はい はい
テンプレートリテラルはInternet Explorerではサポートされていません。

完全な文字列リファレンス

完全な文字列のリファレンスについては、次のURLにアクセスしてください。
完全な JavaScript 文字列リファレンス(開発準備中)。
リファレンスには、すべての文字列プロパティとメソッドの説明と例が含まれています。

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

チュートリアル