Javascript Template literal

• ES6에서 나온 문법 중에 Template Literal이라고 있다.

백쿼터 `

`란 백쿼터를 사용하는 문법으로 대게 줄바꿈 문자열을 간단하게 사용할 때 사용한다.

예를 들어서

<ul>

    <li>HI</li>

</ul>

를 기존에는

let template = '<ul>' + '<li>HI</li>' + '</ul>';

let template = '<ul>\n<li>HI</li>\n</ul>';

으로 사용했다.

let template = '<ul>\
<li>HI</li>\
</ul>';

이것도 가능하긴 하다.

 

ES6에서는 

let template = `

<ul>

    <li>HI</li>

</ul>

`;

이 가능하다.

TEMPALTE LITERAL

const hello = "hello";

let template = `

<ul>

    <li>${hello}</li>

</ul>

`;

문자열에 바로 변수가 넣는 것이 가능하다.

응용 변수만 넣을 수 있나?

아니다.

let friends = [{name:'라이언',age:5},{name:'라이언2',age:2},{name:'라이언3',age:3}];

let template = `<ul>${friends.map( freind => `<li>이름:${freind.name} , 나이: ${freind.age}</li>`).join('\n')}</ul>`

결과물: '<ul>\n<li>이름:라이언 , 나이: 5</li>\n<li>이름:라이언2 , 나이: 2</li>\n<li>이름:라이언3 , 나이: 3</li></ul>'

놀랍게도 변수에 map이나 forEach등이 가능하니 응용이 다채로울듯하다.

응용: 동적 할당

웹 사이트의 경우 동적으로 할당되는 요소들이 많은 데, 이 HTML을 관리하는 것이 쉽지는 않다. 

숨어있다는 표현이 올바를 것 같은데, 어느 곳에 있는지 찾기가 어려울 때가 빈번하게 있다.

 

이런 부분들이 모여 코드 개발 속도를 저하되게 만드는데 이를 해결 방법이 있다.

물론 위 문법으로 해결한다기 보다는 Dom요소에 기대에 해결한다는 것이다.

<script id="selector">

    `<ul>${friends.map( freind => `<li>이름:${freind.name} , 나이: ${freind.age}</li>`).join('\n')}</ul>`

</script>

 

Html 문서 내 body 태그 뒤에 이 script를 넣어둔다.

그리고 해당 태그 요소를 Dom으로부터 가져와서 js로 실행하면 동적 할당 시에 유용하게 사용할 수 있다.

let b = eval(`<ul>${friends.map( freind => `<li>이름:${freind.name} , 나이: ${freind.age}</li>`).join("\n")}</ul>`);

 

eval이란 마음에 들지 않는 요소를 이용한다는 점이 꺼림직하지만, 쓸 수 있는 수단을 모두 사용해서 해결한다는 점이 인상적이다.