템플릿 리터럴(Template Literal)

템플릿 리터럴(Template Literal)

템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식입니다.
기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나
ES6에서는 백틱(back-tick)이라는 기호(`)를 사용하여 정의합니다.

왜 사용 되는가?

자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법.

따옴표 대신 backquote, backtick 이라는 `` 기호를 사용해서 문자를 만들어 사용한다.

템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다.

프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었다.

const str = `hello jaesung`

위와 같이 백틱을 이용하게 되면 여러 줄에 걸쳐 문자열을 정의할 수도 있고, 자바스크립트의 변수를 문자열 안에 바로 연결할 수 있는 이점이 생깁니다.

여러 줄에 걸쳐 문자열 선언하기

기존 자바스크립트의 문자열 선언 방식인 작은 따옴표(')의 문제점은 아래와 같다

var str = 'Template literals are string literals allowing embedded expressions. \n' + 
'You can use multi-line strings and string interpolation features with them. \n' + 
'They were called "template strings" in prior editions of the ES2015 specification.';

작은 따옴표를 이용하여 긴 문자열을 선언하게 되면 자동으로 개행이 되지 않기 때문에 라인 브레이커(line breaker)인 \n를 개행할 곳 중간 중간에 추가해야 했는데
이렇게 되면 문장이 길면 길수록 +와 \n를 계속 추가해줘야 하는 번거로움이 생긴다

백틱을 이용해서 문자열을 선언하게 되면 위와 같이 개행할 필요가 없다

const str = `Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with them.
They were called "template strings" in prior editions of the ES2015 specification.`;

문자열 중간에 변수 바로 대입하기

기존 문자열 정의 방식에서 또 번거로웠던 부분은 바로 자바스크립트 변수 값을 문자열과 함께 사용하는 부분이였는데

var player = 'Ronaldo';
var expression = 'I love ' + player + '!';
console.log(expression); // I love Ronaldo!

위와 같이 문자열에 특정 변수의 값을 함께 사용하려면 +를 이용하여 문자열 중간에 해당 변수를 연결해줘야 했다

ES6에서는 템플릿 리터럴을 이용하면 아래와 같이 간편하게 문자열과 변수를 함께 사용할 수 있다.

var player = 'Ronaldo';
var expression = `I love ${player}!`;
console.log(expression); // I love Ronaldo!

${}를 이용하면 위와 같이 변수의 값을 대입할 수 있을 뿐만 아니라 간단한 연산도 할 수 있다.

var player = 'Ronaldo';
var expression = `I love ${player.split('').reverse().join('')}!`;
console.log(expression); // I love odlanoR!
///문자열 순서를 역으로 바꾸는 코드입니다.

Tagged Template Literals

ES6가 많이 사용되며 템플릿 문자열은 많이 쓰고있다. 하지만 태그가 붙어있는 템플릿 리터럴은 거의 사용해보지 않았을 것이다.
문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용하게 쓰이는 문법.
styled-components를 사용해 봤다면 자기도 모르게 사용해 봤을 것이다.

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

위 코드에서 h1은 태그가 아니라 메서드이다. 보통 태그 함수라고 부른다.

-Tagged Template literal

const food1 = '피자';
const food2 = '치킨';

const foodMsg = (texts, ...values) => {
	console.log(texts);
	console.log(values);
};
foodMsg`제가 어제 먹은 음식은 ${food1}그리고 ${food2}입니다.`;
// [ '제가 어제 먹은 음식은 ', '그리고 ', '입니다.' ]
// [ '피자', '치킨' ]

맨 마지막줄에서 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다. 실행할 함수이름을 쓰시고 소괄호 대신 백틱 문자를 붙여주시면 된다. 그럼 함수가 실행된다

함수 첫번째 인자 texts에는 [ '제가 어제 먹은 음식은 ', '그리고 ', '입니다.' ] 가 들어가 있는게 보이고

두번째 인자 values에는 ${ }안에 있는 [ '피자', '치킨' ] 이 들어가 있다.