テンプレートリテラルを使ってみる

JavaScriptの文字列内で変数が使えるようになる、テンプレートリテラルを使ってみます。

サンプルコード

テンプレートリテラルはバッククォート(`)で囲う記述方法です。
特徴としては、文字列の途中で改行を行ったり、文字列内で ${変数名} のように指定することで変数を使用したりすることができます。

const sample1 = `サンプル`;
console.log(sample1); // サンプル

const sample2 = `
サンプル
改行サンプル
`;
console.log(sample2);
// サンプル
// 改行サンプル

const yourname = '羽那';
const sample3 = `Hello, ${yourname}`;
console.log(sample3); // Hello, 羽那

const link = '#sample';
const title = '記事タイトル';
const sample4 = `
<li>
  <a href="${link}">${title}</a>
</li>
`;
console.log(sample4);
// <li>
//   <a href="#sample">記事タイトル</a>
// </li>

テンプレートリテラルのデモページ