02. Template Literal

기존에 자바스크립트에서 문자열을 선언하기 위해 사용했던 방식인 작은 따옴표( ' )같은 경우에는 글의 강제 개행이 불가하거나 동적인 데이터를 결합하여 한 문장으로 사용할 때에는 + 연산자를 중간에 삽입해 주어야 하는 불편함이 있었다.

따라서 이를 해결하기 위해 Template Literal 방식을 배워보자

---

- 기존 문법의 불편함

자바스크립트에서 문자열을 표기할때 처음부터 끝까지 정적인 데이터만 나열하는 경우에는 문제가 없지만, 글의 강제 개행(일반적으로 엔터를 치는것과 같은)이나 다른 변수의 값을 불러오거나 수식을 계산하거나 등등... 의 동적인 데이터를 결합하여 코드를 작성할 때에는 그러한 데이터를 결합 할때마다 따옴표( ' )를 써서 작성하던 정적인 데이터의 문자열을 닫고 + 연산자로 새로운 문자열을 삽입, 연결해 주어야 했다.

const apple = "사과"
const banana = "바나나"

console.log('오리는 ' + apple + '와 ' + banana + '를 좋아합니다.')

이를 보완하기 위해 사용하는것이 Template Literal이다.

 

- Template Literal 사용법

Template Literal 방식으로 위의 코드와 동일한 결과를 나타내기 위해서는 우선 따옴표가 아닌 백틱 ( ` ) 으로 문자열을 감싼다. 백틱은 키보드 ₩에 해당하는 위치에 있다. 처음에 이를 몰라서 내 키보드에는 백틱이 없는줄 알았다. ₩로 나올때는 한영키를 클릭해서 영문으로 바꾼다음에 클릭하면 나온다.  이후 일반 문자열처럼 사용할때에는 기존의 방식대로 작성하다가 표현식을 삽입하고자 할때에는 ${ }으로 변수를 감싸준다. 또한 엔터와 같은 강제개행 역시 \n 과 같은 별다른 수식없이 그대로 화면에 보이는대로 동작한다. 이를 적용하여 위의 코드와 같은 결과값을 나타내면 아래와 같다.

const apple = "사과"
const banana = "바나나"

console.log(`오리는 ${apple}와 ${banana}를 좋아합니다.`)

이와같은 짧은 문자열에서는 크게 Template Literal의 이점을 못느낄수 있지만 매우 긴 텍스트를 한번에 처리해야 할 일이 생긴다면 매우 유용하게 쓰일것 같다. 문자열을 처리할때 띄어쓰기 하나도 생각하며 코드를 작성하는것은 생각보다 쉬운일이 아니다. 따라서 앞으로 긴 텍스트를 변수와 함께 사용할 일이 생긴다면 무조건 이 방식을 사용해서 코드를 작성할 것 같다.