템플릿 리터럴(Template Literal)

템플릿 리터럴은 JS에서 문자열을 입력하는 방식으로, 백틱을 사용해 정의할 수 있으며, (1) 여러 줄에 걸쳐 문자열을 선언하고, (2)문자열 중간에 변수를 바로 대입할 수 있다.

(1) 여러줄에 걸쳐 문자열 선언하기

기존 JS 문자열 선언방식 따옴표('')를 사용하면 행을 넘겨주기위해 \n 과 + 를 사용해주어야 한다.

console.log('안녕하세요, JS를 공부하고 있습니다.\n'+ 
'코딩은 재밌어요.'); 

// 안녕하세요, JS를 공부하고 있습니다. 
// 코딩은 재밌어요. 

백틱을 사용하면 자동개행이 된다.

console.log(`안녕하세요, JS를 공부하고 있습니다.
코딩은 재밌어요.`); 
// 안녕하세요, JS를 공부하고 있습니다. 
// 코딩은 재밌어요. 

(2) 문자열 중간에 변수를 바로 대입할 수 있다.

기존 문자열 방식에서 문자열과 변수를 연결하려면 +를 사용해 연결해줘야 했다😦

var language = 'JS';
var expression = '안녕하세요,' + language + '를 공부하고 있습니다.';
console.log(expression); 
// 안녕하세요, JS를 공부하고 있습니다. 

하지만, 템플릿 리터럴을 이용하면 아래와 문자열과 변수값 연결이 아래와 같이 간편해 진다!👏🏻

var language = 'JS';
var expression = `안녕하세요, ${language}를 공부하고 있습니다.`;
console.log(expression); 
// 안녕하세요, JS를 공부하고 있습니다. 

오늘의 생각

이고잉님의 말씀대로 따옴표''와 /n +를 1억번 만큼 반복해야 할 지도 모른다고 과장해보았고, 그 불편함을 오늘 배운 템플릿 리터럴로 극복 할 수있다고 알고나니 이것은 혁신이었다. 불편함을 과장하며 코드를 배우자. 코딩은 재밌다.👻

참고한 페이지링크

(템플릿 리터럴)
1.https://joshua1988.github.io/es6-online-book/template-literal.html#%EC%97%AC%EB%9F%AC-%EC%A4%84%EC%97%90-%EA%B1%B8%EC%B3%90-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%84%A0%EC%96%B8%ED%95%98%EA%B8%B0
2.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals