[JavaScript] Template Literal

이번시간은 자바스크립트 ES6에서 사용가능한 Template Literal을 알아보겠습니다.

템플릿 리터럴이란?

JS에서 문자열을 그대로 입력할 수 있는 방식인데, ES5이하 버전에서 줄바꿈을 하기위해 사용했던 \n 이나, 변수를 넣기 위해 "++" 이러한 선언을 할 필요 없이 있는 그대로를 백틱(``)을 사용하여 템플릿화 할 수 있습니다.

ES5 VS ES6 차이점

1) 줄바꿈 해보기

ES5 방식

console.log("ES5버전에서 줄바꿈을 하려면 \n 을 입력해서 사용했다");
      //ES5버전에서 줄바꿈을 하려면 
      //을 입력해서 사용했다

ES6 방식

console.log(`반면에 ES6버전에서 줄바꿈을 하려면 그냥
      이렇게 하면됩니다.`);
      //반면에 ES6버전에서 줄바꿈을 하려면 그냥
      //이렇게 하면됩니다.

2)변수 선언해보기

ES5 방식

	var name = "승훈";
	var age = "비밀";

	console.log("제 이름은 " + name + "입니다. 나이는 " + age + " 	입니다.");
	//제 이름은 승훈입니다. 나이는 비밀 입니다.

ES6 방식

	console.log(`제 이름은 ${name}입니다. 나이는 ${age} 입니		다.`);
	//제 이름은 승훈입니다. 나이는 비밀 입니다.

이런식으로 템플릿 리터럴을 사용하면 훨씬 더 간편하게 문자열을 표현할 수 있습니다 ㅎㅎㅎ

참고 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals