[JS] Template Literals

Template Literals

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해 보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱(backtick) 문자 `를 사용한다.
출처 : 템플릿 리터럴

저는 기존 방식 ( '작은 따옴표' 와 "큰 따옴표" ) 를 자주 사용했는데 저번에 한번 백틱을 이용해서 작성하니까 이게 진짜 말도안되게 편하더라구요 줄바꿈도 쉽고 코드도 더 가시성이 좋다보니까 요즘에는 템플릿 리터럴을 자주 사용해요

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

템플릿 리터럴 안에있는 값들은 자동으로 문자열로 변한답니다 ( 문자 + 숫자는 문자열로 변환이랑 같은 맥락 )