Template Literals
ES6에서 새롭게 도입된 문자열 표기법
back-tick(`) 문자를 사용한다.
기존에 문자열을 표기할 때 작은 따옴표(')나 큰 따옴표(")를 사용했는데, ES6부터는 백틱(`) 문자를 사용해 더 편리해졌다.
기존에 문자열을 표기했던 방식을 먼저 살펴보겠다.
var a = 2;
var b = 1;
var c = "자바스크립트";
var str = "저는 " + (a + b) + "학년이고\n" + c + "를 공부하고 있습니다.";
console.log(str);
//저는 3학년이고
//자바스크립트를 공부하고 있습니다.
이제 전과 달라진 표현 방식을 살펴보자.
백틱 안에서는 ${표현식} 형식으로 문자열 안에 표현식을 넣을 수도 있고
공백 문자나 줄바꿈 문자가 그대로 표현된다.
위 코드를 결과가 같게 template literals로 표현한 예시를 보자.
let a = 1;
let b = 2;
let c = "자바스크립트";
let str = `저는 ${a + b}학년이고
${c}를 공부하고 있습니다.`;
console.log(str);
//저는 3학년이고
//자바스크립트를 공부하고 있습니다.
이 템플릿 리터럴의 속성을 HTML과 함께 사용하면 유용한데, 마지막으로 그 예시를 한번 살펴보자.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Template Literals</h2>
<p>Template literals allows variables in strings:</p>
<p id="demo"></p>
<p>Template literals are not supported in Internet Explorer.</p>
<script>
let header = "Templates Literals";
let tags = ["template literals", "javascript", "es6"];
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
html += `<li>${x}</li>`;
}
html += `</ul>`;
document.getElementById("demo").innerHTML = html;
</script>
</body>
</html>
