[JS] 템플릿 리터럴(``)

❓ 템플릿 리터럴(Template literals)이란?

MDN 공식문서에 따르면 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이라고 한다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있고 ES6에 추가된 문법이라고 한다. 사용법은 단순히 이중 따옴표("") 혹은 작은 따옴표('') 대신에 백틱(``)을 이용한다.

같은 문법을 템플릿 리터럴과 아닌 방식으로 표현 해보자.

 일반 문자열 연결

let age = 13;
let name = "김철수";

console.log("내 이름은" + name + "이고, 나이는 " + age + "입니다." );

문자열과 변수를 연결할때는 +를 사이사이 넣어주어서 연결해주어야한다. 하지만 템플릿 리터럴을 사용한다면?

 템플릿 리터럴

let age = 13;
let name = "김철수";

console.log(`내 이름은 ${name}이고 나이는 ${age} 입니다`);

위와 같이 간략한 문장을 쓰는데도 보이듯, + 기호를 안씀으로써 코드의 가독성이 한층 좋아졌다. 좀더 긴 예시를 보자면, 개행은 기본적으로 문자열에서 허용되지 않기에 백슬래시(\)로 시작하는 이스케이프 시퀀스를 사용해야하지만 백틱(``)을 쓰면 허용이 가능하다!

 일반 문자열 연결

let contents = '오늘 점심은\n'+'순두부찌개를\n'+'먹었습니다!'

console.log(contents);

// 출력
// 오늘 점심은
// 순두부찌개를
// 먹었습니다!

개행을 위해 문장과 \n을 같이 쓰는걸 볼 수 있다.

 템플릿 리터럴

let contents = `
오늘 점심은
김치볶음밥을
먹었습니다>ㅁ<
`;

console.log(contents);

// 출력
// 오늘 점심은
// 김치볶음밥을
// 먹었습니다>ㅁ<

간결한 코드에서는 크게 차이를 못느낄 수도 있지만, 코드가 길어짐에 따라 텍스트와 이스케이프 시퀀스를 같이 사용하면 가독성이 떨어져 보일 수 있다. 그렇기에 ES6에 추가된 템플릿 리터럴로 간편하게 문자열을 표현하는 습관을 들여보자!