1. ホーム 
  2. 備忘録 
  3. JavaScript

テンプレートリテラル

テンプレートリテラル

バッククォートで文字を囲うとテンプレートリテラルとなる

テンプレートリテラルを使うと文中にプレースホルダーを含めることができる

main.py

// テンプレートリテラル
let userName = 'Mike';
let template = `Hello ${userName}!!`;
console.log(template); // Hello Mike!!

他にも、改行文字周りの仕様が異なる点が通常の文字列リテラルとの相違点である

main.py


// 通常は特殊文字 \n を使うことで改行する
let longMessage = 'こんにちは。\nいい天気ですね。';
console.log(longMessage);
/*
こんにちは。
いい天気ですね。
*/

// バッククォートで囲うと文中の改行はそのまま改行として扱われる
longMessage = `そうですね。
とても暖かくて気持ち良いです。`;
console.log(longMessage);
/*
そうですね。
とても暖かくて気持ち良いです。
*/

タグ付きテンプレート

タグを使用してテンプレートリテラルを関数で解析することができる

通常関数は f() のように括弧をつけて呼び出すが、括弧の部分をテンプレートに置き換えて f`` のように関数を呼び出すことができる

f`` のような形で呼び出すことを目的に実装された関数のことをタグ関数という

main.py

const view = tagFunction`<div>${hoge}と${fuga}</div>`;

function tagFunction(strings, ...values) {
    console.log(strings); // ['<div>', 'と', '</div>', raw: Array(3)]
    console.log(...values); // aaa bbb
}