ECMAScript 6 (ES 2015)에서 추가된 문법인 템플릿 문자열(template literal)은 문자열 사용을 더욱 편하게 해준다.
문자열을 따옴표(')나 큰 따옴표(")로 감싸지 않고 억음 기호(`)로 감싸야 한다. 역따옴표라고도 하며, 쿼티 자판에서 Tab키 위에, ESC키 아래에 있다.
문자열 중간에 변수의 값을 넣을 수 있다. 아래는 그 예시이다.
var i = 7;
var string = `Hello template literal ${i}, it is me!`;
// Hello template literal 7, it is me!
여러 줄의 문자열도 지원한다. 아래는 템플릿 문자열을 사용한 예와 그렇지 않은 예다.
var string0 =
`안녕하세요.
GF의 블로그입니다.
템플릿 문자열은
꽤나 편합니다.
이렇게 하면 돼요.
그럼 안녕!`;
var string1 =
'안녕하세요. GF의 블로그입니다. 템플릿 문자열은 꽤나 편합니다. 이렇게 하면 돼요. 그럼 안녕!';
아래는 내가 실제로 템플릿 문자열을 사용한 예이다.
array.forEach(function(obj, i)
{
innerHTML +=
`<tr class='tr-pointer' role='button' data-toggle='collapse' data-target='#collapseExample${i}' aria-expanded='false'
aria-controls='collapseExample${i}'>
<td>${obj.sub_dept}</td>
<td>${obj.subject_div}</td>
<td>${obj.subject_div2}</td>
<td>${obj.subject_no}</td>
<td>${obj.class_div}</td>
<td>${obj.subject_nm}</td>
<td>${obj.shyr}</td>
<td>${obj.credit}</td>
<td>${obj.prof_nm}</td>
<td>${obj.class_nm}</td>
<td>${obj.tlsn_limit_count}</td>
</tr>
<tr class='collapseItem bg-light w-100'>
<td class='collapse collapseItem w-100 p-0' colspan='11' id='collapseExample${i}' data-parent='#LectureListTable'>
<div class='d-flex p-3'>
<div class='collapseContent col p-0 text-left'>
<div><b>교과구분 </b>${obj.subject_div}</div>
<div><b>세부영역 </b>${obj.subject_div2}</div>
<div><b>교과번호 </b>${obj.subject_no}</div>
<div><b>학년 </b>${obj.shyr}</div>
<div><b>학점 </b>${obj.credit}</div>
<div><b>강의시간및강의실 </b>${obj.class_nm}</div>
<div><b>정원 </b>${obj.tlsn_limit_count}</div>
</div>
<div class='d-flex flex-column align-items-end h5' data-id='${obj._id}'>${buttons}</div>
</div>
</td>
</tr>`;
});
여러 줄을 허용해서 가독성도 좋고, 변수를 쉽게 넣을 수 있어 편하다.
만약 템플릿 문자열을 사용하지 않고 가독성을 유지하고자 한다면, 아래와 같이 작성했을 것이다.
array.forEach(function(obj, i)
{
innerHTML +=
"<tr class='tr-pointer' role='button' data-toggle='collapse' data-target='#collapseExample"+i+"' aria-expanded='false' "
+"aria-controls='collapseExample"+i+"'>"+
"<td>"+obj.sub_dept+"</td>"+
"<td>"+obj.subject_div+"</td>"+
"<td>"+obj.subject_div2+"</td>"+
"<td>"+obj.subject_no+"</td>"+
"<td>"+obj.class_div+"</td>"+
"<td>"+obj.subject_nm+"</td>"+
"<td>"+obj.shyr+"</td>"+
"<td>"+obj.credit+"</td>"+
"<td>"+obj.prof_nm+"</td>"+
"<td>"+obj.class_nm+"</td>"+
"<td>"+obj.tlsn_limit_count+"</td>"+
"</tr>"+
"<tr class='collapseItem bg-light w-100'>"+
"<td class='collapse collapseItem w-100 p-0' colspan='11' id='collapseExample"+i+"' data-parent='#LectureListTable'>"+
"<div class='d-flex p-3'>"+
"<div class='collapseContent col p-0 text-left'>"+
"<div><b>교과구분 </b>"+obj.subject_div+"</div>"+
"<div><b>세부영역 </b>"+obj.subject_div2+"</div>"+
"<div><b>교과번호 </b>"+obj.subject_no+"</div>"+
"<div><b>학년 </b>"+obj.shyr+"</div>"+
"<div><b>학점 </b>"+obj.credit+"</div>"+
"<div><b>강의시간및강의실 </b>"+obj.class_nm+"</div>"+
"<div><b>정원 </b>"+obj.tlsn_limit_count+"</div>"+
"</div>"+
"<div class='d-flex flex-column align-items-end h5' data-id='"+obj._id+"'>"+buttons+"</div>"+
"</div>"+
"</td>"+
"</tr>";
});
오 저런... 저 수 많은 + 기호들과 " 기호들...
하지만 안타깝게도, 당신이 개발하는 웹이 IE 지원을 생각하고 있다면 아직 템플릿 문자열을 사용해서는 안 된다.
IE에서는 2018.10.23 기준, 아직 템플릿 문자열 문법을 지원하지 않는다. 그러므로 이곳에서 그 지원 여부를 확인하기 바란다. 2018.10.23 기준으로 ES6의 11% 정도만이 IE에 호환된다. 매우 안타깝다.
