Template Literals

Template Literals

우리는 문자열을 만들 때 아래의 코드처럼 +연산자를 이용하여 만들었다.
하지만 +연산자를 이용하면 코드가 길어지며 복잡해진다.

const age = 1;
const petName = "bau";
const str = "나에게는 " + petName + " 라는 이름을 가진 강아지가 있고 " + "나이는 " + age + "살 입니다.";
console.log(str); // "나에게는 bau 라는 이름을 가진 강아지가 있고 나이는 1살 입니다."

그래서 등장한것이 Template Literals(탬플릿 리터럴)이다.!

탬플릿 리터럴은 ``(백틱)안에 문자열을 넣고 ${ }안에는 변수를 넣으면 된다.위의 코드를 탬플릿 리터럴을 이용해 만들어보자.

const age = 1;
const petName = "bau";
const str = `나에게는 ${petName} 라는 이름을 가진 강아지가 있고 나이는 ${age}살 입니다.`;
console.log(str); // "나에게는 bau 라는 이름을 가진 강아지가 있고 나이는 1살 입니다."

코드가 가독성있게 바뀌었으며 길이도 짧아졌다.
또한 템플릿 리터럴은 ``(백틱)안에서 줄바꿈도 가능하다는 장점이 있다.

참고한 사이트
https://poiemaweb.com/es6-template-literals
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-ES6-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A6%AC%ED%84%B0%EB%9F%B4-%EC%B5%9C%EC%8B%A0-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC