[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의 진가는 문자열과 표현식의 결합시에 가장 잘 드러나는데

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