Comparison of Multiline-String Techniques in JavaScript

multilineStrings.js

const modalTemplateLiteral = speaker => {
  const { name, title, photo, altText, bio } = speaker
  return `
  <div class="speaker_modal_container">
    <div class="speaker_modal">
      <span class="sm_close" onclick="destroyModal()"><i class="fas fa-times"></i></span>
      <h3 class="sm_speaker">
        <span class="sm_name">${name}</span>
        <span class="sm_title">${title}</span>
      </h3>
      <div class="sm_content">
        <img class="sm_photo" src="${photo}" alt="${altText || name}">
        ${bio}
      </div>
    </div>
  </div>`
}

function modalConcatenation(speaker) {
  return (
    '\n' +
    '<div class="speaker_modal_container">\n' +
    '  <div class="speaker_modal">\n' +
    '    <span class="sm_close" onclick="destroyModal()"><i class="fas fa-times"></i></span>\n' +
    '    <h3 class="sm_speaker">\n' +
    '      <span class="sm_name">' + speaker.name + '</span>\n' +
    '      <span class="sm_title">' + speaker.title + '</span>\n' +
    '    </h3>\n' +
    '    <div class="sm_content">\n' +
    '      <img class="sm_photo" src="' + speaker.photo + '" alt="' + (speaker.altText || speaker.name) + '">\n' +
    '      ' + speaker.bio +
    '    </div>\n' +
    '  </div>\n' +
    '</div>'
  )
}

function modalConcatenationReassignment (speaker) {
  var modal = ''
  modal += '\n  <div class="speaker_modal_container">'
  modal += '\n    <div class="speaker_modal">'
  modal += '\n      <span class="sm_close" onclick="destroyModal()"><i class="fas fa-times"></i></span>'
  modal += '\n      <h3 class="sm_speaker">'
  modal += '\n        <span class="sm_name">' + speaker.name + '</span>'
  modal += '\n        <span class="sm_title">' + speaker.title + '</span>'
  modal += '\n      </h3>'
  modal += '\n      <div class="sm_content">'
  modal += '\n        <img class="sm_photo" src="' + speaker.photo + '" alt="' + (speaker.altText || speaker.name) + '">'
  modal += '\n        ' + speaker.bio
  modal += '\n      </div>'
  modal += '\n    </div>'
  modal += '\n  </div>'
  return modal
}

function modalArrayWithJoin (speaker) {
  return [
    '',
    '  <div class="speaker_modal_container">',
    '    <div class="speaker_modal">',
    '      <span class="sm_close" onclick="destroyModal()"><i class="fas fa-times"></i></span>',
    '      <h3 class="sm_speaker">',
    '        <span class="sm_name">' + speaker.name + '</span>',
    '        <span class="sm_title">' + speaker.title + '</span>',
    '      </h3>',
    '      <div class="sm_content">',
    '        <img class="sm_photo" src="' + speaker.photo + '" alt="' + (speaker.altText || speaker.name) + '">',
    '        ' + speaker.bio,
    '      </div>',
    '    </div>',
    '  </div>',
  ].join('\n')
}