Template literals

템플릿 리터럴이란 ?

내장된 표현식을 허용하는 문자열 리터럴이라고 한다.
이중 따옴표 나 작은 따옴표 대신 백틱(``) 을 사용해 표현식을 넣어준다.

✍🏼 기본 작성 방법

" string text line
string text line 2 "

이 문장을 코드로 구현시키고싶다면 아래의 코드처럼 문자열이니까 ""와 줄바꿈을 위해 1/n 문법을 넣어주고 두 문장을 연결하기 위해 +도 필요할 것이다.

console.log("string text line 1\n"+
"string text line 2");

하지만 템플릿 리터럴을 통해서는 동일한 결과를 구현하기위한 코드를 훨씬 간략하게 작성할 수 있다.

console.log(`string text line 1
string text line 2`);

✍🏼 표현식과 함께 쓰려면 ?

let a = 5;
let b = 10;
console.log("Fifteen is " + (a + b) + " and not " + (2 * a + b) + ".");
// 결과 "Fifteen is 15 and not 20."

기존 방식의 코드를 보자면 변수와 문자열을 함께 표현하기위해 코드의 가독성이 떨어지게 되는데,

//템플릿 리터럴으로 간단하게
let a = 5;
let b = 10;
console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
// 결과 "Fifteen is 15 and not 20."

템플릿 리터럴을 사용하게되면 동일한 결과를 얻기위한 코드도 훨씬 가독성있게 작성 가능하다.

끝으로,
템플릿 리터럴을 익혀두면 앞으로 사이트를 구현하기위해 길어지는 코드를 조금이라도 더 파악하기 쉽게 사용할 수 있을 것이다. 코드의 가독성을 높이기 위한 다양한 구문들을 익혀두도록하자.

템플릿 리터럴 관련 참고 👉🏻 MDN TEMPLATE LITERALS