템플릿 리터럴

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 이는 일반적인 홑따옴표, 쌍따옴표 사용 대신에 백틱(backtick) 문자 ` 을 사용한다.

일반적인 문자열에서 줄바꿈은 허용되지 않으며 공백(white-space)를 표현하기 위해서는 백슬래시()로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다.

ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 white-space는 있는 그대로 적용된다.

console.log(`string text line 1
string text line 2`);
// 결과
// string text line 1 (줄바꿈) 
// string text line 2

또한, 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다.

let pants = 20;
let socks = 100;

console.log(`바지 ${pants} 양말 ${socks}`);
// 결과
// 바지 20 양말 100

태그드 탬플릿 리터럴

태그드 탬플릿 리터럴(Tagged Template Literals)은 템플릿 리터럴(Template Literals)의 발전된 형태로써 이를 이용하여 함수의 인자(Parameter)를 파싱하여 넘겨주는 것이다.

원래 기본적인 함수 호출법은 함수() 이렇게 하나, 태그드 템플릿 리터럴을 사용하면 하단 소스에 [해체분석기바지 ${pants} 양말 ${socks}]처럼 함수를 함수+백틱+문자열+변수+백틱 이런식으로 불러줄 수 있다.

이렇게 넘겨주면, 함수의 첫번째 인자(Parameter)에는 정적 데이터가 저장되어 있고, 나머지 파라미터에는 동적 데이터가 저장되어 있는 모습을 볼 수 있다. 이를 이용해 단어 순서를 변경하거나, 단어를 제거하거나, ${변수} 위치를 옮기거나를 할 수 있다.

let pants = 20;
let socks = 100;

function 해체분석기(글자들, 변수1, 변수2) {
	if(pants == 0) {
    	pants = '안팔아요'
        console.log(`바지 ${pants} 양말 ${socks}`);
   	} else {
    	console.log(`양말 ${pants} 바지 ${socks}`)
    }
}

해체분석기`바지 ${pants} 양말 ${socks}`;