JavaScript ES6 テンプレート文字列(テンプレートリテラル)

JavaScript ES6 テンプレート文字列(テンプレートリテラル)

ES6の糖衣構文(ES5の動作とは変わりはないけれど読み書きしやすく導入されたもの)のテンプレート文字列の説明です。
テンプレート文字列を使用すると、文字列の中に式を挿入したり、複数行の文字列を扱えたり、便利っ!!!

基本的な例

従来の書き方

const name = '田中';
const message = 'こんにちは、' + name + 'さん!';
console.log(message); //結果 こんにちは、田中さん!

ES6のテンプレート文字列

const name = '田中';
const message = `こんにちは、${name}さん`;
console.log(message); //結果 こんにちは、田中さん!

まず、全体をバッククォート( ` ←コレ)で囲む。
バッククォート内で${}を使用するとその中でJavaScriptが使えちゃう。

変数だけじゃなくて式もOK!

JavaScriptであればOK!

const message = `3 × 4 ÷ 2は${3 * 4 / 2}だよ!`;
console.log(message); //結果 3 × 4 ÷ 2は6だよ!

改行もそのまま書けちゃう

console.log(`改行も
でき
ちゃう`);
//結果
//改行も
//でき
//ちゃう 

入れ子もOK!

あくまで可読性と相談しながら…ですが、下記みたいな入れ子もできちゃいます。

const sushi = ['うに','いくら','たまご'];
const render = `
<ul>
    ${sushi.map(item => `<li>${item}</li>`).join('')}        
</ul>    
`;
console.log(render);
//<ul>
//   <li>うに</li><li>いくら</li><li>たまご</li>        
//</ul>   

if文は使えないので三項演算子を使用する

//const sushi = ['うに','いくら','たまご'];
const sushi = [];
const render = `
${sushi.length ? '<ul>' : '<p>本日、寿司売り切れです。</p>'}
    ${sushi.map(item => `<li>${item}</li>`).join('')}       
${sushi.length ? '</ul>' : ''}  
`;
console.log(render);
//<p>本日、寿司売り切れです。</p>  

テンプレートリテラル便利ですね!

この記事をシェア

Categories

Profile

兵庫県神戸市でWEB/DTPまわりのフリーランスをしています。
当ブログは主に業務で出会った諸々の備忘録です。

イラストスイッチ