템플릿 리터럴이란?

• 템플릿 리터럴(Template Literals)은 ES6(ECMAScript2015)에 도입된 기능입니다.
• 백틱 ( ` )으로 감싸진 문자열을 사용하여 여러 줄 문자열, 문자열 보간, 태그된 템플릿 리터럴 등을 지원합니다.

템플릿 리터럴 이전 문자열 결합 방법

문자열 연산자 (+)를 사용하여 두 개 이상의 문자열을 연결할 수 있습니다.

let greeting = "Hello";
let name = "Jinwoo";
let message = greeting + " " + name;
console.log(message); // 출력: Hello Jinwoo

템플릿 리터럴 주요 특징

문자열 보간

템플릿 리터럴을 사용하면 ${} 구문을 통해 변수와 표현식을 쉽게 삽입할 수 있습니다.

let name = "Jinwoo";
let age = 30;
let greeting = `Hello, my name is ${name} and I am ${age} years old.`;
console.log(greeting); // Hello, my name is Jinwoo and I am 30 years old.

여러 줄 문자열

백틱( ` )을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있습니다.

let poem = `
하늘 아래 나만 봄
꽃만 피는 줄 아는가

매화 다 핀 줄 아는가
봄은 가고 꽃은 지는 줄
`;

console.log(poem);

표현식 삽입

${} 구문 안에 간단한 표현식을 삽입할 수 있습니다.

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

템플릿 함수 호출

템플릿 리터럴에서 함수를 호출하여 문자열을 동적으로 생성할 수 있습니다.

function getDateTime() {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  let hours = now.getHours();
  let minutes = now.getMinutes();
  let seconds = now.getSeconds();

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

let message = `현재 날짜와 시간은 ${getDateTime()}입니다.`;
console.log(message); // 현재 날짜와 시간은 2024-5-23 21:17:39입니다.