[javascript] ES6 - 템플릿 리터럴(template literals)

INTRO

---

 

Frontend 개발을 진행하면서, 모호했던 javascript의 개념들을

다시 한번 정리하기 위한 포스팅이다.

ES6(2015) 에서 추가된 템플릿 리터럴에 대해서 알아본다.

 

 

 

---

 

0. 서론

- 기존 자바스크립트에서 문자열을 사용할 때, " " 또는 ' ' (큰따옴표, 작은따옴표) 를 사용하여 선언하였다.

- 템플릿 리터럴은 `` (백틱) 문자를 사용하여 문자열을 선언하며, 아래와 같은 기능들을 포함한다.

1. 여러 줄 문자열을 쉽게 표현(multi-line string)

2. 표현식을 끼워넣어 가독성 증가(expression interpolation)

3. 태그를 지정하여 태그된 함수를 사용할 수 있다.(tagged template literal)

- 아래는 간단한 템플릿 리터럴의 예이다

const single = 'This is single quotes';
const double = "This is double quotes";
const template = `This is template literals`;

- 3번 tagged template literal 의 경우 문장만 봤을 땐 이해하기 힘들었으나,

- 아래 기술할 예제를 보면 금방 이해 될 것이다.

 

1. 여러 줄 문자열을 쉽게 표현(multi-line string)

- 기존 따옴표를 사용하여 문자열에서 개행을 표현하려면, \n 과 같은 개행문자를 사용했었다.

- 템플릿 리터럴을 사용할 경우, 개행을 코드상에서 수행하면 별도의 개행문자 없이 개행을 표현할 수 있다.

- 가급적 맨 아래 예제처럼 들여쓰기를 하여 가독성을 늘리는 것을 추천한다.

// 기존
const quote = 'line1\nline2\nline3';

// 템플릿 리터럴로 이렇게도 사용 가능하지만,
const template1 = `line1\nline2\nline3`;

// 템플릿 리터럴 내에서 개행을 사용할 수 있다.
const template = `line1
                line2
                line3`;

 

2. 표현식을 끼워넣어 가독성 증가(expression interpolation)

- 끼워넣는다는 표현을 사용했는데, interpolation이라는 단어가 다양한 분야에서 일반적으로 '보간' 이라는 단어로 해석됨

- js에서는 '외부에 있는 변수를 문자열 내 특정 위치로 삽입' 한다는 의미가 더 맞다.

- ${} 를 사용하여 템플릿 리터럴 사이에 표현식을 넣을 수 있다.

// 기존 문자열
const a = 1;
const b = 2;
const quotes = a + ' + ' + b + ' = ' + (a + b) + ' 이다. ';

// template literals
const template = `${a} + ${b} = ${a + b} 이다. `;


// Output
1 + 2 = 3 이다.

- 위 예제 이외에도 더 복잡한 상황에서 다양하게 활용 가능하다.

 

3. 태그를 지정하여 태그된 함수를 사용할 수 있다.(tagged template literal)

- 템플릿 리터럴로 선언된 문자열 앞에 태그를 붙일 수 있다.

- 태그는 함수를 말하는데, 기존의 함수 사용법은 아래와 같았다.

const UpperNameOnly = (str, last, first) => {
  return str + ' ' + last.toUpperCase() + ' ' + first.toUpperCase();
};

const first = 'andrew';
const last = 'choi';

const string = UpperNameOnly('My name is', last, first);
console.log(string);

// Output
My name is CHOI ANDREW

 

- 템플릿 리터럴에 태그를 사용하기 위해 함수를 조금 바꾸고, 함수 사용법도 조금 바꿀것이다.

- 변경사항을 잘 보면 차이를 알 수 있다.

const UpperNameOnly = (strArr, last, first) => {
  return strArr[0] + last.toUpperCase() + ' ' + first.toUpperCase();
};

const first = 'andrew';
const last = 'choi';

const string = UpperNameOnly`My name is ${last} ${first}`;
console.log(string);

// Output
My name is CHOI ANDREW

- 템플릿 리터럴의 문자열들은 ${} 로 끼워넣은 표현식을 기준으로 split되며,

- 함수의 첫 번째 매개변수에 배열형태로 들어온다.

- 나머지 ${}로 표현된 표현식들은 뒤의 매개변수로 들어온다.

- 위 예제만 봐서는 뭐가 좋은지 잘 감이 안오지만,

- graphql-tag, styled-components 등의 라이브러리들을 사용할 때 그 장점을 알 수 있다.

(이외의 편리성이나 가독성에 대한 best practice는 아직 찾지 못했다.)

const Button = styled.button`
  width: 200px;
  padding: 30px;
`;

 

 

마무리

이외에도 템플릿 리터럴 안에 템플릿 리터럴을 중첩해서 사용하는 방법도 가능하지만 이 경우는 특수한 경우를 제외하곤 사용할 일이 별로 없어보인다.

또한 3번 문단 tagged 기능으로, 원래의 문자열을 출력하기위해 String.raw 기능을 사용할 수도 있다.

 

 

참고 :

https://www.digitalocean.com/community/tutorials/understanding-template-literals-in-javascript

https://eblee-repo.tistory.com/38

 

 

 

 

-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!