자바스크립트 - 템플릿 리터럴(Template literals)

템플렛 리터럴(Template literals)

템플렛 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. ES2015 사양명세서에서는 template strings라고 불렸습니다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다. 프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.)

표현식 삽입법과 비교

템플릿 리터럴은 작은따옴표(')나 큰따옴표(") 대신 백틱(`)(grave accent)로 감싸줍니다.

const txt1 = "모던";
const txt2 = "자바스크립트";
const txt3 = "핵심";

document.querySelector(".sample1_N3").innerHTML = 3;
document.querySelector(".sample1_Q3").innerHTML = "모던, 자바스크립트, 핵심";
document.querySelector(".sample1_M3").innerHTML = "문자열 결합";
document.querySelector(".sample1_P3").innerHTML = "나는 " + txt1 + "(modern) " + txt2 + "(javascript) " + txt3 + "을 배우고 싶다.";

document.querySelector(".sample1_N4").innerHTML = 4;
document.querySelector(".sample1_Q4").innerHTML = "모던, 자바스크립트, 핵심";
document.querySelector(".sample1_M4").innerHTML = "문자열 결합";
document.querySelector(".sample1_P4").innerHTML = `나는 ${txt1}(modern) ${txt2}(javascript) ${txt3}을 배우고 싶다.`;