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

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

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

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

このページの目次

テンプレートリテラルって何なの？
テンプレートリテラルで心配なこと
ここまでのまとめ

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

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

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

/** シングルクォートで囲む */
var message = 'JS stands for JavaScript';

/** あるいはダブルクォートで囲む */
var message = "JS stands for JavaScript";

/** シングルクォートで囲む */

var message = 'JS stands for JavaScript';

/** あるいはダブルクォートで囲む */

var message = "JS stands for JavaScript";

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

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

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

var html = `
<from>
名前 : 
<input type="text" id="your_name">
<button id="my_submit_btn">送信</button>
</form>
`;

var html = `

<from>

名前 :

</form>

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

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

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

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

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

let nameID = 'your_name';
let ageID = 'your_age';
let btnID = 'my_submit_btn';

let html = `
<from>
名前 : 
<input type="text" id="${nameID}">
年齢 : 
<inout type="text" id="${ageID}">
<button id="${btnID}">送信</button>
</form>
`;

let nameID = 'your_name';

let ageID = 'your_age';

let btnID = 'my_submit_btn';

let html = `

<from>

名前 :

年齢 :

</form>

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

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

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

/** 送信ボタンのHTMLを返す関数 */
function submitBtnHTML(){
  return '<button id="my_submit_btn">送信</button>';
}

let html = `
<from>
名前 : 
<input type="text" id="your_name">
年齢 : 
<inout type="text" id="your_age">
${submitBtnHTML()}
}
</form>
`;