[ES6]Template Literal

 

템플릿 리터럴이란 ?

 

먼저 이 단어 자체에 대해서 생각을 해보자.

 

Template 은 흔히들 기본적으로 어떠한 틀을 일컫는데 사용하는 단어이다.

 

Literal 은 사전에서 찾아보자면 ' 원문 그대로의 ' 라는 뜻인것을 찾을 수 있겠다.

 

그러면 Template Literal은 ?

 

' 원문 그대로의 틀 ' 이라는 용어로 해석해볼 수 있겠다.

 

자, 이제 이 뜻을 생각하면서 사용법과 기능에 대해 알아보려고 한다.

 

사용법

 

기본적인 사용법은 백틱이라고 불리우는 `` 로 문자열을 감싸주는 것인데

 

이 백틱은 자판기의 영문자 상태에서 1의 왼쪽 ~/₩ 라고 적혀있는 자판을 누를 시에 나타난다.

 

기능

 

기능은 아래 코드를 보면 직관적으로 이해할 수 있다.

 

 

  // 일반적인 형태의 string 표기법 

  // 1. 일반적인 문자열 선언 

  const greeting = "안녕하세요, 저는 야돈입니다." 

  // 2. 문자열과 표현식의 결합 

  const a = 20; 

  const b = 6; 

  const MyInfo = "제 나이는 " + a " 하고도 " + b " 살입니다.";



  // ES6의 Template Literal 사용법 

  // 1. 위와 동일 

  const greeting = `안녕하세요, 저는 야돈입니다.`

  // 2. ''

  const a = 20; 

  const b = 6; 

  const MyInfo = `제 나이는 ${a} 하고도 ${b} 살입니다.`

 

위 코드에서 보다시피 기본적인 문자열을 선언할 때에도 큰 따옴표나 작은 따옴표를 사용하는 것 대신

 

백틱을 사용하여 선언하면 동일한 효과를 낼 수 있다.

 

또한 이 Template Literal의 진가는 문자열과 표현식의 결합시에 가장 잘 드러나는데

 

한번의 백틱 문자열 선언 내에서 표현식을 불러올 경우 그 표현식을 ${ } 로 감싸주는 것으로 간단하게 불러올 수 있다.