ZeroCho Blog

 안녕하세요. 이번 시간에는 템플릿 문자열에 대해서 알아보겠습니다. 간단하지만 매우 편리한 기능입니다.

템플릿에 대해 들어보신 적 있으신가요? 템플릿이란 서식 또는 견본을 말합니다. 한글 문서나 마이크로소프트 워드, 엑셀, 파워포인트에도 서식같은 게 많이 있죠. 그 서식을 사용하면 빈 페이지에서 시작하는 게 아니라 기본적인 것은 알아서 만들어줍니다. 문자열 템플릿도 마찬가지입니다. 미리 준비되어 있는 틀이란 거죠. 그 안에 상황에 맞는 내용을 넣기만 하면 됩니다.

ES2015에서는 문자열이 템플릿처럼 쓰일 수 있게 되었습니다. 예시를 보죠.

var a = 3;
var b = 'hi';
var object = {
  c: 'friends'
};
var string = b + ', my ' + a + ' ' + object.c; // 'hi, my 3 friends'

흠 정신없네요. 여러 변수를 합쳐서 문자열을 만드려니까 띄어쓰기도 고려해야하고, +와 따옴표가 자꾸 나와 눈이 어지럽습니다. 데이터가 들어가있는 복잡한 문자열을 만들 때 띄어쓰기 등의 오타가 자주 나서 두 번 이상 고치는 번거로움을 감수해야 했습니다. ES2015의 놀라운 변화를 보겠습니다! 위의 문자열과 다음 문자열은 같습니다.

const string2 = `${b}, my ${a} ${object.c}`;

헉, 처음보는 게 몇 개 있지만, 더 이상 지저분한 +와 여러 개의 따옴표를 쓰지 않아도 됩니다. 키보드 숫자 1 왼쪽에 있는 `를 사용한 문자열 템플릿이 다 해결해줍니다. 백틱이라고 불리는 기호인데요. 따옴표 대신 백틱을 사용하고 그 안에 변수들은 ${ }로 감싸주면 됩니다. 그러면 자바스크립트 엔진이 알아서 합쳐줍니다.

이렇게 틀을 만들어놓고 데이터가 들어갈 공간(${ })을 주면 데이터가 알아서 그 틀에 맞게 들어가 문자열이 완성됩니다. 그래서 이것을 문자열 템플릿이라고 표현하는 겁니다.

또한 백틱을 쓰면 여러 줄을 표현하는 것도 쉽습니다. 기존에는 \n을 붙여 줄이 구분된다는 것을 표현했는데요. 이제는 그런 것 없이 그대로 표현할 수 있습니다.  아래 두 개는 같습니다.

var string3 = 'hello\nfriends!';
const string4 = `hello
friends!`;
/*
hello
friends!
*/

굳이 템플릿으로 쓰지 않더라도, 백틱을 쓰면 큰따옴표 작은따옴표를 구분해서 쓸 필요가 없습니다! 세 번째 따옴표라고 생각하시면 됩니다. 정말 편하죠?

const string5 = `I'm Zero`;
const string6 = `"I teach you JS"`;

템플릿 리터럴의 진화형으로 태그가 붙은 템플릿 리터럴도 있습니다. 이 강좌에서 다루는 걸 빼먹어 이 강좌 에서 따로 다룹니다.

다음 시간에는 대망의 class를 알아보겠습니다! 자바스크립트에도 class가 생겼습니다!