템플릿 리터럴은 JS에서 문자열을 입력하는 방식으로, 백틱을 사용해 정의할 수 있으며, (1) 여러 줄에 걸쳐 문자열을 선언하고, (2)문자열 중간에 변수를 바로 대입할 수 있다.
기존 JS 문자열 선언방식 따옴표('')를 사용하면 행을 넘겨주기위해 \n 과 + 를 사용해주어야 한다.
console.log('안녕하세요, JS를 공부하고 있습니다.\n'+
'코딩은 재밌어요.');
// 안녕하세요, JS를 공부하고 있습니다.
// 코딩은 재밌어요.
백틱을 사용하면 자동개행이 된다.
console.log(`안녕하세요, JS를 공부하고 있습니다.
코딩은 재밌어요.`);
// 안녕하세요, JS를 공부하고 있습니다.
// 코딩은 재밌어요.
기존 문자열 방식에서 문자열과 변수를 연결하려면 +를 사용해 연결해줘야 했다😦
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