[자바스크립트 / Vanilla JS] ES6 템플릿 리터럴 (Template Literal)

템플릿 리터럴(Template Literal)

 

템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식이다.

기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나 ES6에서는 백틱(back-tick)이라는 기호(`)를 사용한다

const str = `Hello ES6`;

위와 같이 백틱을 이용하게 되면 여러 줄에 걸쳐 문자열을 정의할 수도 있고, 자바스크립트의 변수를 문자열 안에 바로 연결할 수 있는 이점이 생긴다.

 

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

이를 문자열 인터폴레이션(String Interpolation)이라 한다.

문자열 인터폴레이션은 ${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.

var Year = 2022;
var str = '오늘은' + Year + '년 입니다.'  // 오늘은 2022년 입니다

템플릿 리터럴이 생기기 이 전에는 위의 예시와 같이 문자열에 특정 변수의 값을 함께 사용하려면 +를 이용하여 문자열 중간에 해당 변수를 연결해줘야 했다.

하지만 ES6에 접어들며 템플릿 리터럴이 생기고 부터는 위의 예시를

var Year = 2022;
var str = `오늘은 ${Year}년 입니다`; // 오늘은 2022년 입니다

이렇게 가독성이 더 나은 코드로 작성할 수 있다.

 

아래처럼 템플릿 리터럴을 활용하여 간단한 연산도 가능하다 ! 

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

 

출처 : https://poiemaweb.com/es6-template-literals

https://joshua1988.github.io/es6-online-book/template-literal.html