template literal (ECMAScript2015)

우선 코드를 보자!

var a = 'abc';  //abc   문자열 리터럴
var b = "abc";  //abc   문자열 리터럴
var c = `abc`;  //abc   템플릿 리터럴

console.log(a===b); //true
console.log(a===c); //true
console.log(b===c); //true

위의 코드를 보면 결과가 모두 같다.

기존의 '로 묶는방법 "로 묶는방법이 있는데 왜 `(백틱)으로 묶는 방법이 나왔을까?

 

기존의 불편했던 코드들을 한번 살펴보자.

var a = 'abc\n' + 'bcd';

줄바꿈을 하기 위해서 이런형식으로 사용을 한다. 너무 불편하다...

 

 

하지만 template literal방식을 사용하면

var a =`abc
bcd`;
console.log(a);

이렇게 그냥 엔터를 치면은 알아서 처리를 해준다!

 

 

또 다른 편한점을 보자면

const a = 10;
const b = 20;
const result = `${a} + ${b} = ${a+b}`;
console.log(result);

${}를 사용해서 변수를 가져다 사용할 수 있다!

 

 

만약 이 방식을 사용하지 않고 String literal방식을 사용하면 아래와 같다

const result = a "+" + b + "-" + (a+b);

너무 가독성이 떨어지고... 휴먼에러가 발생할 것만 같은..코드다.

 

 

 

 

참고

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