Template Literals

ES6에서는 템플릿 리터럴(Template literal)이라는 새로운 문자열 표기법이 도입되었습니다. 일반 문자열과 비슷하지만 작은따옴표나 큰따옴표 대신 백틱(`) 문자를 사용합니다. 출처 : 템플릿 리터럴

예전에는 작은따옴표와 큰따옴표를 주로 썼는데, 백틱으로 작성해 보니 줄바꿈도 쉽고 코드도 읽기 좋아서 요즘은 템플릿 리터럴을 자주 사용합니다.

let feelings = '좋아 좋아'

let txt01 = '오늘의 기분은 아주 ~' + feelings;
console.log(txt01) // 오늘의 기분은 아주 ~ 좋아 좋아

기존 방식에서는 문자열과 변수를 함께 쓰려면 +로 이어 붙여야 했습니다. 이것만 보면 템플릿 리터럴이 꼭 필요한지 의문이 들 수 있는데,

let feelings = '좋아 좋아'

let txt01 = '오늘의 기분은 아주 ~' + feelings + ' 그래서 오늘은 치킨 먹어야지~';
let txt02 = '오늘의 기분은 아주 ~ \n' + feelings + '\n그래서 오늘은 치킨 먹어야지~';

console.log(txt01) // 오늘의 기분은 아주 ~ 좋아 좋아 그래서 오늘은 치킨 먹어야지~
console.log(txt02) // 오늘의 기분은 아주 ~ 
					  좋아 좋아
                      그래서 오늘은 치킨 먹어야지~

위 코드처럼 문자열과 변수가 섞이면 +가 계속 들어가 코드가 길어지고, 줄바꿈을 하려면 \n을 직접 넣어야 했습니다.

템플릿 리터럴을 사용하면 다음과 같습니다.

let feelings = '좋아 좋아'

let txt01 = `오늘의 기분은 아주 ~ ${feelings} 그래서 오늘은 치킨 먹어야지~`;
let txt02 = `오늘의 기분은 아주 ~ 
${feelings}
그래서 오늘은 치킨 먹어야지~
`;

console.log(txt01) // 오늘의 기분은 아주 ~ 좋아 좋아 그래서 오늘은 치킨 먹어야지~
console.log(txt02) // 오늘의 기분은 아주 ~ 
					  좋아 좋아
                      그래서 오늘은 치킨 먹어야지~

변수는 ${변수명}으로 넣고, 줄바꿈은 엔터만 치면 그대로 반영됩니다.

${ } 안에서는 간단한 연산도 할 수 있습니다. 구구단을 반환하는 함수를 만들어 보겠습니다.

function timesTable(num) {
	//num은 입력받은 단(숫자)
	for(let i = 1; i <= 9; i++){
		console.log(`${num} X ${i} = ${num * i}`);
	}

}
timesTable(4) // 구구단 4단을 찍어줘!
// 4 X 1 = 4
// 4 X 2 = 8
// 4 X 3 = 12
// 4 X 4 = 16
// 4 X 5 = 20
// 4 X 6 = 24
// 4 X 7 = 28
// 4 X 8 = 32
// 4 X 9 = 36

템플릿 리터럴 안의 값은 자동으로 문자열로 변환됩니다. (문자열 + 숫자가 문자열이 되는 것과 같은 원리입니다.)