템플릿 리터럴(Template Literals)

ES6는 템플릿 리터럴(Template Literals)은 일반 문자열과 비슷해보이지만 ' 또는 " 같은 통상적인 따옴표 문자 대신 백틱(Backtick) (`) 문자를 사용한다.

const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`;

console.log(template);

방법1

일반적인 문자열에서 줄바꿈은 허용되지 않고 공백(white-spce)를 표현하기 위해 백슬래시()로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용해야한다. 템플릿 리터럴은 일반적인 문자열과 다르게 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.

const template = `<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>`;

console.log(template);

[결과]

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

방법2

템플릿 리터럴은 + 연산자를 사용하지 않고 간단한 방법으로 문자열을 삽입할 수 있는데 이를 문자열 인터폴레이션(String Interpolation)이라고 한다.

const first = 'GildDong';
const last = 'Hong';

//ES5 String
console.log('My name is ' + first + ' ' + last + '.');
//문자열 인터폴레이션(String Interpolation)
console.log(`My name is ${first} ${last}.`);

문자열 인터폴레이션(String Interpolation)은 ${...} 으로 표현식을 감싸고 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.

console.log(`2 * 9 = ${2 * 9}`); //18

참조

https://poiemaweb.com/es6-template-literals

https://jsdev.kr/t/es6/2944

줄바꿈과 공백을 그대로 보관할 때

백틱으로 감싼 문자열은 여러 줄에 걸쳐 작성할 수 있다. 줄바꿈과 들여쓰기 공백도 문자열에 들어가므로 HTML을 보기 좋게 정렬하려고 넣은 공백이 실제 출력에 남을 수 있다. 일반 문자열에도 \n 이스케이프를 넣으면 줄바꿈을 만들 수 있다. 두 문법의 차이는 줄바꿈을 소스 코드에 직접 적을 수 있는지다.

const first = `첫째 줄
둘째 줄`;
const second = "첫째 줄\n둘째 줄";
console.log(first === second); // true

운영체제에 따라 소스 파일의 줄 끝 표기가 달라도 자바스크립트 문자열에서 줄바꿈을 다루는 목적은 같다. 줄바꿈 개수를 정확히 제어해야 하는 프로토콜 메시지라면 보이는 서식에 의존하기보다 \n을 명시하는 편이 읽기 쉽다.

보간은 문자열 변환이지 HTML 이스케이프가 아니다

${expression} 안에는 산술식이나 함수 호출을 넣을 수 있다. 식은 실행 시 평가되고 결과가 문자열로 바뀐다. 그러나 사용자 입력을 템플릿에 넣는다고 HTML 특수 문자가 자동으로 안전해지지는 않는다.

const userInput = '<img src=x onerror=alert(1)>';
const message = `입력: ${userInput}`;
output.textContent = message; // DOM 텍스트로 표시
// output.innerHTML = message; // 입력을 HTML로 해석하므로 위험

output은 페이지에서 선택한 DOM 요소라는 전제다. 사용자 문장을 보여주기만 하면 textContent를 사용한다. HTML을 실제로 만들어야 한다면 사용 중인 프레임워크의 안전한 렌더링 경로를 사용하고, 문자열을 직접 innerHTML에 넣지 않는다. 또한 템플릿 리터럴 안의 변수는 값이 평가될 때마다 읽힌다. 이미 만들어 놓은 message 문자열은 나중에 userInput이 바뀐다고 자동 갱신되지 않는다.

const name = "Kim";
const greeting = `Hello, ${name}`;
// name을 다른 값으로 바꿔도 greeting은 기존 문자열이다.

String.raw나 태그 함수(tagged template)를 사용하면 템플릿의 원시 문자열 조각과 보간 값을 별도로 처리할 수 있다. 로그 문자열을 읽기 쉽게 만들려는 정도면 일반 보간으로 충분하고, 도메인별 이스케이프·구문 처리가 필요할 때 태그 함수를 검토한다.

참고: MDN Template literals