템플릿 리터럴(Template Literal)이란?

 

안녕하세요, 윌입니다.

 

이번엔 템플릿 리터럴에 대한 정리를 해보려고 합니다.

 

템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 문자열 리터럴의 한 형태로,

 

백틱(backtick)(```)으로 감싸여 있으며, 보간(interpolation)과 여러 줄 문자열을 지원하는 것이 특징입니다.

 

템플릿 리터럴을 사용하면 가독성이 높고 유연한 문자열 처리가 가능합니다.

 

*참고 리터럴이란?

 

https://jsdnl123.tistory.com/31#google_vignette

리터럴(Literal)과 변수(Variable)의 차이는 무엇인가?

 

템플릿 리터럴의 주요 특징

1. 보간(Interpolation):
   • 템플릿 리터럴은 ${} 문법을 사용하여 문자열 내에 변수나 표현식을 삽입할 수 있습니다.
   • 예시

     const name = "John";
     const greeting = `Hello, ${name}!`;
     console.log(greeting); // "Hello, John!"

2. 여러 줄 문자열(Multiline Strings):
   • 템플릿 리터럴은 여러 줄에 걸쳐 문자열을 작성할 수 있으며, 줄바꿈이 그대로 유지됩니다. (백틱 외 일반 따옴표는 적용되지 않음!!)
   • 예시

     const multiline = `This is a
     multiline string.`;
     console.log(multiline);
     // 출력:
     // This is a
     // multiline string.

3. 표현식 삽입(Expressions in Strings):
   • 템플릿 리터럴은 단순 변수뿐만 아니라 복잡한 표현식도 삽입할 수 있습니다.
   • 예시

     const a = 5;
     const b = 10;
     const result = `The sum of ${a} and ${b} is ${a + b}.`;
     console.log(result); // "The sum of 5 and 10 is 15."

 

요약

템플릿 리터럴은 자바스크립트에서 문자열을 다루는 방법을 크게 향상시킵니다. 이를 통해 가독성 높은 코드 작성, 동적 문자열 생성, 여러 줄 문자열 작성 등이 가능해집니다. 특히 문자열 내에 변수나 표현식을 삽입하는 기능은 코드의 가독성과 유지 보수성을 크게 향상시킵니다.