JavaScriptで複数行文字列を代入する一番簡単な方法

JavaScriptで複数行文字列を代入する方法は色々ありますよね。調べると+で行を連結するやり方とかやたらトリッキーな手法とかが見つかります。

ですが現在はテンプレートリテラルを使えば長い文字列でもスマートに代入したり表示する方法があるので、わざわざ面倒なことをする必要がなくなりました。

ここではこのテンプレートリテラルについてまとめてみてみます。

テンプレートリテラルって何なの?

従来だと文字列を作るにはクォートで文字列を囲っていました。

例えばちょうど次のコードみたいに

今まではこういう風にシングルクォート(  '  )またはダブルクォート(  "  )しか使えませんでした。

 

しかしES2015(別名ES6)からは新たにテンプレートリテラルが使えるようになりました。

使い方は簡単で次のように複数行を  ` `  で囲むだけ

ちなみに  '  はバッククォートと呼ばれていて、  Shift  + @ キーで入力可能

これだけで一切トリッキーなことをせずに複数行文字列が定義できます。僕自身も最近までこのことを知らなかったんですがかなり便利です。

 

しかも文字列リテラルはただ複数行を定義できるだけではありません。

リテラルの中でまるでPHPのヒアドキュメントみたいに変数を展開もできちゃいます。

例えば次のコードみたいな感じで

変数名を上のコードの  ${nameID}  とか  ${ageID}  とか  ${ageID}   みたいに  ${}  で囲むことでその変数の内容を展開することが可能です。

 

ちなみに変数だけではなくて関数とかでもそのまま展開が可能

例えば次が文字列を返す関数を展開しているコード例です

これは中々便利ですね。PHPのヒアドキュメントだと純粋な変数しか展開できないのでJSの方が一歩先を行ってるような感じがします。

テンプレートリテラルで心配なこと

こんな便利なテンプレートリテラルですが1つ心配がありました。

それは「どのブラウザでも問題なく動くの?」ということです。

何しろES2015ES6)から追加された新しい構文なのでブラウザで対応済みなのか気になるところです。

 

それで何か調べる方法がないか探していたら次のような便利なサイトを見つけました。

このサイトはES6から使えるようになった各構文が対応済みか一覧で確認できるサイトです。

 

文字列リテラルが対応しているかは「§template literals」の所を見れば分かります。

この行のブラウザ対応を見てみればわかりますがIEを含めて全てのブラウザで対応済みです。

なので互換性が無くてエラーが出るとかの心配はなさそうですね。

ここまでのまとめ

ということでJS6から追加されたテンプレートリテラルについてまとめました。

こういう書き方があるとは最近まで知らなかったのでどんどん使っていきたいです。

ではでは($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください