【JavaScript】テンプレートリテラル

テンプレートリテラル

テンプレートリテラルによって、複数行文字列や文字列補間は驚くほど簡単に実現できるようになりました。

例えば、従来のJavaScriptの構文でHTMLを組み立てようとした場合、おそらく次のようになるでしょう。

var user = {
  name: '鈴木太郎',
  age: 25,
  image: 'exapmle.jpg'
}

var html = ''
html += '<div class="user">'
html += '<div class="name">名前：' + user.name + '</div>'
html += '<div class="age">年齢：' + user.age + '</div>'
html += '<div class="image">'
html += '<img src="' + user.image + '"alt="' + user.name + '" />'
html += '</div>'
html += '</div>'

いくつもの文字列の連結により、何がどのようになっているのか推測するには困難な状況です。しかし、この書き方よりほかに方法はありませんでした。
次に、テンプレートリテラルを用いた書き方を見てみましょう。テンプレートリテラルは、シングルクォートやダブルクォートの代わりに、バッククォート`を用います

const user = {
  name: '鈴木太郎',
  age: 25,
  image: 'exapmle.jpg'
}

const html = `
<div class="user">
  <div class="name">名前：${user.name}</div>
  <div class="age">年齢：${user.age}</div>
  <div class="image">
    <img src="${user.image}" alt="${user.name}" />
  </div>
</div>`

以前の構文に比べて、かなり読みやすくなったのではないでしょうか。テンプレートリテラルでは、\nのような表現に頼らずに改行をすることができます。
また、文字列の補間として、ドル記号と波括弧で${}表すことができます。${}のなかで変数を展開したい計算をすることができます。

テンプレートリテラルのタグ付け

ここまでの用法は、すでにご存知の方も多いかと思います。
テンプレートリテラルのさらに高度な使用法として、タグ付けされたテンプレートリテラルを使用することができます。

テンプレートリテラルにタグを付けるには、次のように使用します。

greet`こんにちは、${user.name}さん。年齢は${user.age}歳です。`

ここでは、関数greetというタグを付けています。
greet関数の呼び出しでは、テンプレートが引数として渡されます。関数の本体では、テンプレートで何からの処理を実行して新しい値を返します。

greet関数を実装してみましょう。

const user = {
  name: '鈴木太郎',
  age: 25,
  image: 'exapmle.jpg'
}

const language = 'en'

function greet(string, ...args) {
  string[0] // こんにちは、
  string[1] // さん。年齢は
  string[2] // 歳です。

  args[0] // 鈴木太郎
  args[1] // 25

  // 配列をコピー
  const copy = [...string]

  if (language === 'en') {
    const english = []
    copy[0] = 'Hello'
    copy[1] = 'age is'
    copy[2] = 'years old'
  } 
  // Hello Mr.鈴木太郎age is25years old
    return copy.reduce((previous, current) => {
      return `${previous}${String(args.shift())}${current}`
    })
}

console.log(greet`こんにちは、${user.name}さん。年齢は${user.age}歳です。`)

タグ付け関数の第一引数には、文字列部分が配列として入っています。
これは、リテラル中に${}が含まれている場合、${}によって分割されます。
この第一引数の配列には、プロパティの変更・削除・追加が不可能 という特徴があるため、加工をするために配列をコピーしていることに注意してください。
2つ目以降のパラメータには、補間された値が入っているため、レストパラメータで配列として取得しています。
これらの文字列は、reduce関数でつなぎ合わせることができます。
このように。文字列を加工して返すことができます。