テンプレートリテラルを1分でマスタ―する【JavaScript】

JavaScript

テンプレートリテラル(別名:テンプレート文字列)は、 ECMAScript6から新しく使えるようになった構文で文字列の中に変数や定数を埋め込むことができる便利な仕組みです。

このページでは、テンプレートリテラルについて初心者の人でも今日から使えるように1から解説します。

このページで学べる内容
  • テンプレートリテラルとは何か?
  • テンプレートリテラルの使い方

JavaScript初心者でも1分で理解できるようサンプルコード付きで解説します。是非最後までご覧ください。

スポンサーリンク
スポンサーリンク

テンプレートリテラル(テンプレート文字列)とは?

デジタル化, 進化, 変更, 開発, コンピューター, インテリジェント, 技術, 電気工学

テンプレートリテラル(テンプレート文字列)は、文字列の中に変数や定数などを埋め込んだり、改行を入れたりすることができるようにして、文字列の扱いを楽に便利にできる構文です。

テンプレートリテラルができるまでは、文字列を結合する際に「+」を記述する必要がありましたが、テンプレートリテラルを用いればその必要がありません。そのため、JavaScriptの構文全体がすっきりして見やすくなって、JavaScript初心者の方でもぱっと見で意味が分かりやすくなります。

テンプレートリテラルは、最新の構文なのでちょっと前までは対応しているブラウザが少なかったのですが、今ではほとんどのブラウザで対応済。これからの主流です。

テンプレートリテラル(テンプレート文字列)の使い方

テンプレートリテラルの使い方は非常に簡単。

これまで文字列を「””(ダブルクォーテーション)」もしくは「''(シングルクォーテーション)」で囲んきましたが、テンプレートリテラルでは「``(バックコート)」にするだけです。

console.log(`テンプレートリテラル`) //  `(バックコート)で囲むだけ!

構文は全く難しくありませんので、早速ここからはテンプレートリテラルでできることを見てきましょう。

改行ができる!

これまで改行するには「\n(エスケープ)」を記述する必要がありましたが、テンプレートリテラルを利用すればそのまま改行することができます。

let sample  = "はろー\nわーるど";   // "\n"エスケープを利用して改行

let sample2 = `はろー
わーるど`;                          // コード内で改行(テンプレートリテラル)

See the Pen テンプレートリテラルー改行 by ビズドットオンライン (@BizOnline) on CodePen.

${変数} ⇒ 変数の値を文字列に埋め込む

${変数}とすることで、文字列の中に直接変数を埋め込むことができます。

See the Pen テンプレートリテラル―$変数 by ビズドットオンライン (@BizOnline) on CodePen.

これまでは「+」記号をうまく使って文字列をマニュアルで結合していました。これ結構面倒でしたね。

See the Pen テンプレートリテラルがない場合 by ビズドットオンライン (@BizOnline) on CodePen.

今後は、テンプレートリテラルを利用して変数は直接文字列の中に埋め込むのが主流になっていくはずです。

${式} ⇒ 式を文字列に埋め込む

変数だけではなく、${式}を文字列に埋め込むことも可能です。

See the Pen テンプレートリテラル 式 by ビズドットオンライン (@BizOnline) on CodePen.

エスケープ(\n)との組み合わせ

これまで改行を行う場合に用いていた「\n(エスケープ)」も一緒に利用することができます。

See the Pen テンプレートリテラル 改行\ by ビズドットオンライン (@BizOnline) on CodePen.

ただし、この利用方法はあまり見かけない気がします。テンプレートリテラルを利用するのであれば、わざわざエスケープする必要はありません。

使いどころは分かりませんが、こういうのもできるんだ程度に覚えておくと役に立つときが来るかもしれません。

JavaScriptを体系的に学びたい方は

プログラミングをより実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、1から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。

タイトルとURLをコピーしました