자바스크립트 템플릿 리터럴

 

자바스크립트 템플릿 리터럴이 뭔지 쉽고 간단하게 알아보겠습니다.

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.

`string text`

자바스크립트에서 백틱 ` 이라는 기호로 문자데이터를 만드는것을 템플릿리터럴이라고합니다.

백틱 ` 이라는 기호로 만드는 문자데이터는 중간에 어떠한 데이터를 채워넣을때 사용합니다.

 

여기서 리터럴은 어떠한 기호를 통해 데이터를 만드는 방식을 뜻합니다.

 

 

ES6 이전에는 표현식을 다음과 같이 일반 문자열 안에 집어넣었습니다.

var first_name = "Lee ";
var last_name = "JinUk "; 
var age = 25;
var result = "제 이름은 " + (first_name + last_name) + "이고 " + "나이는 " + age + "살 입니다."  
console.log(result);

 

템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기합니다.

const first_name = "Lee ";
const last_name = "JinUk "; 
const age = 25;
const result = `제 이름은 ${first_name + last_name}이고 나이는 ${age}살 입니다.`; 
console.log(result);

 

템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다.

 

*주의 할점은 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다는 점입니다.

console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"