JavaScript作業MEMO バッククオートを使用し綺麗にまとめる

バッククオートを使用し綺麗にまとめる

xxx.js

function buildHTML(user) {
  var user_name = user.name
  var member = $('<div class="chat-group-user__name">').append(user_name);
  var add_button = $('<div class="chat-group-user__btn chat-group-user__btn--add">').append("テキスト");
  var list = $('<li class="chat-group-user">').append(member, add_button);
  $(".member-list").append(list);
}

バッククウォートを使用し、綺麗にまとめると以下のようになる。

xxx.js

function buildHTML(user) {
    var user_name = user.name
    var list = $(`
      <li class="chat-group-user">
        <div class="chat-group-user__name">${user_name}</div>
        <div class="chat-group-user__btn chat-group-user__btn--add">テキスト</div>
      </li>
      `);
    $(".member-list").append(list);
}

Point
・「.append」を多用しないのでパッと見てわかりやすい
・改行をそのまま書くことができる
・${～} の中には、変数や計算式を入れられる。

参考リンク

JavaScript の テンプレートリテラル を極める！
もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~