JavaScript

[JS] 템플릿 리터럴(Template Literal)

aaaahy 2023. 1. 10. 20:15

템플릿 리터럴(Template Literal)

- 내장된 표현식을 허용하는 문자열 리터럴

- 여러 줄로 이루어진 문자열과 문자 보간 기능 사용 가능

- "template string"(템플릿 문자열)으로도 불림

 

사용 예제

var nickname = 'aaaahy';
var letter = 'Dear ' + nickname + ' The pain we are going through is maybe trivial.'
console.log(letter);

위 코드 실행 결과

 

여기서 nickname인 'aaaahy' 다음 띄어쓰기를 하고 싶을 경우, 

일반적으로 개행문자(newline character)인 '\n'을 추가하여 아래와 같이 작성할 수 있다.

var nickname = 'aaaahy';
var letter = 'Dear ' + nickname + '\nThe pain we are going through is maybe trivial.'
console.log(letter);

개행 문자 추가 후 코드 실행 결과

 

 

템플릿 리터럴을 사용하려면 ?

 

- 이중 따옴표(" ")나 작은 따옴표(' ') 대신 백틱(` `) (grave accent)을 이용

- 표현식을 넣을 때는 $와 중괄호( $ {expression} ) 로 표기

var nickname = 'aaaahy';
var letter = `Dear ${nickname}
The pain we are going through is maybe trivial.`;
console.log(letter);

템플릿 리터럴 사용 결과

 

템플릿 리터럴을 사용하여 위의 개행 문자 사용한 코드 결과와 같은 결과를 보여줄 수 있다.

 

템플릿 리터럴 사용의 장점

  • 개행하기 위해 특수 문자를 사용할 필요가 없다.
  • 여러 표현식을 간단하게 넣을 수 있다.
  • 표현식에 변수뿐만 아니라 산술 연산도 가능하며 다양하게 활용할 수 있다.

 

* 사용예제는 생활코딩 Node.js-8.JavaScript 문법 - Template Literal을 기반으로 작성됨