템플릿 리터럴(ES6)

ES6부터 새로운 문자열 표기법인 Template Literal이 도입되었다.

템플릿 리터럴은 작은따옴표(' ')나 큰따옴표(" ")같은 일반적인 따옴표 대신,

백틱(` `)을 사용해서 표현한다.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

 

템플릿 리터럴의 문자열 처리 기능 3가지를 소개하려고 한다. (이 외에도 많으니 MDN을 참고하길 바람)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

 

1. 멀티라인 문자열(multi-line string)

- 일반 문자열 내에서는 줄바꿈이 허용되지 않기 때문에 이스케이프 시퀀스(escape sequence)를 사용해야한다.

이스케이프 시퀀스	의미
\0	Null
\b	백스페이스
\f	폼 피드(프린터로 출력할 때, 다음페이지의 시작점으로 이동)
\n	다음 행으로 이동
\r	커서를 처음으로 이동
\t	탭(수평)
\v	탭(수직)
\uXXXX	유니코드
\'	작은따옴표
\"	큰따옴표
\\	백슬래시

console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

하지만, 백틱을 사용한 템플릿 리터럴을 사용할 경우, 이스케이프 시퀀스를 사용하지 않고 줄바꿈과 모든 공백이 그대로 적용되므로 더욱 편리해진다.

아래 예시처럼~!!

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

 

2. 표현식 삽입(expression interpolation)

- 문자열은 문자열 연산자 +를 사용해 연결할 수 있다.

- +연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다. (이 외의 경우, 덧셈 연산자로 동작!)

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

하지만, 템플릿 내에서는 표현식 삽입을 통해 더 간단하게 문자열을 삽입할 수 있다.

그리고 문자열 연산자보다 가독성이 좋고 간편하게 문자열을 조합할 수 있다.

아래 예시처럼~!!

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

 

 

3. 태그드 템플릿(tagged template)

템플릿 리터럴의 발전한 형태로, 함수 형태로 사용할 수 있다.

function transform(staticData, ...dynamicData) {
  console.log(staticData); // ["Hi, ", " and I am ", "."]
  console.log(dynamicData); // ["jojjang", 20]
}

transform`Hi, ${userName} and I am ${age}.`;

Tag function 들은 string 을 반환할 필요는 없다.

function transform(staticData) {
  console.log(staticData); // Hi, jojjang and I am 20.
}

transform(`Hi, ${userName} and I am ${age}.`);

Tagged Template Literals 문법을 사용하면 타입에 상관없이 Function, Number, Array, Object 등을 전달하고 실행할 수 있다.

 

이 3가지 외에도 많은 기능들이 있다.

Nesting templates

Raw strings

기능이 있지만, 이건 MDN 사이트에서 찾아보세요~!!

 

그리고, ES6로 바뀌면서 추가된 내용들이 많은데

앞으로 그것들에 대해서도 다뤄볼 생각이다!!

 

 

<출처>

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

https://mygumi.tistory.com/395

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