[Javascript] 템플릿 리터럴 사용법 기초, 달러(${})와 벡틱(`)

 

Template literals

---

 

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
내장된 표현식은 달러와 중괄호 (${}) 로 표기하며,
문자열 리터럴은 이중 따옴표(")나 작은 따옴표(') 대신, 벡틱(`)을 이용하여 표현합니다.

관련 기능들은 아래 목차에 정리해 두었습니다.
예제를 보면 기능을 금방 파악할 수 있습니다.

 

목차

1. 문자열 표현 기능
2. 여러 줄 문자열 표현 기능 - Multi-line strings
3. 템플릿 리터럴 안에서 벡틱(`)을 그대로 표현하는 방법은?
4. ${} (자리 표시자)에 표현식 삽입하여 문자열 보간 기능 - Expression interpolation
5. tag를 사용하여 템플릿 리터럴을 함수로 파싱 하는 기능 - Tagged templates
6. 템플릿을 중첩하여 문자열을 표현 하는 기능 - Nesting templates

 

---

 

내용

 

 

1. 문자열 표현 기능

---

(예제)

let str = `string text`

 

 

2. 여러 줄 문자열 표현 기능

---

(예제)

let str =
    `string text line 1
     string text line 2`

 

 

3. 템플릿 리터럴 안에서 벡틱(`)을 그대로 표현하는 방법은?

---

(예제)

`\`` === "`" 	// --> true, 슬래쉬를 사용하면 된다.

 

 

4. ${} (자리 표시자)에 표현식 삽입하여 문자열 보간 가능 - Expression interpolation

---

(예제)

let str = `string text ${expression} string text`

 

 

5. tag를 사용하여 템플릿 리터럴을 함수로 파싱 가능 - Tagged templates

---

: 예제의 myTag 부분을 확인해 보세요.

(예제)

 var person = 'j';
 var age = 34;

 function myTag(strings, personExp, ageExp) {

   		...
 }

 var output = myTag`that ${ person } is a ${ age }`;

 

 

6. 템플릿을 중첩하여 문자열 표현 가능 - Nesting templates

---

: 템플릿을 중첩하여 예제 (1) 코드를 예제 (2) 코드로 변경할 수 있습니다.

(예제)

 // (1)
 const classes = `header ${ isLargeScreen() ? '' :
        (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;
        
 // (2) 
 // 위 코드를 중첩된 템플릿 리터럴로 개선하여 가독성을 높일 수 있다.    
 const classes = `header ${ isLargeScreen() ? '' :
     `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;​

 

---