템플릿 리터럴

*템플릿 리터럴(Template Literal)**은 JavaScript에서 문자열을 보다 편리하게 다룰 수 있도록 하는 기능입니다.
기존 문자열 연결(+) 방식보다 가독성이 뛰어나고, 표현식 삽입이 가능하며, 여러 줄 문자열을 쉽게 작성할 수 있다는 장점이 있습니다.

 

✅ 템플릿 리터럴의 기본 문법

템플릿 리터럴은 백틱(`) 을 사용하여 문자열을 감싸고, ${}를 이용해 변수를 삽입할 수 있습니다.

 

예1)

const name = "Alice";
const greeting = `안녕하세요, ${name}님!`; // 변수 삽입
console.log(greeting); // 출력: 안녕하세요, Alice님!

 

const name = "Alice"; const greeting = `안녕하세요, ${name}님!`; // 변수 삽입 console.log(greeting); // 출력: 안녕하세요, Alice님!

백틱을 사용하면 기존의 + 연산자 없이도 변수를 직접 문자열에 삽입할 수 있습니다.

 

----------------------------------------------------------------------------------------------------------------------------------

✅ 여러 줄 문자열 작성

템플릿 리터럴을 사용하면 줄바꿈(\n) 없이도 여러 줄 문자열을 작성할 수 있습니다.

 

const message = `이것은 첫 번째 줄입니다.
이것은 두 번째 줄입니다.
이것은 세 번째 줄입니다.`;

console.log(message);

 

기존의 따옴표("", '')를 사용한 방식과 달리 \n 없이도 줄바꿈이 가능합니다.

----------------------------------------------------------------------------------------------------------------------------------

✅ 표현식 삽입

템플릿 리터럴에서는 수식, 함수 호출 등도 ${} 내부에 삽입할 수 있습니다.

const a = 5; const b = 10; console.log(`a + b = ${a + b}`); // 출력: a + b = 15

${} 안에 **JavaScript 표현식(연산, 함수 호출 등)**을 넣으면, 계산된 결과가 문자열에 삽입됩니다.

----------------------------------------------------------------------------------------------------------------------------------

 

✅ 함수에서 활용

템플릿 리터럴을 활용하여 동적 문자열 생성이 가능합니다.

 

function welcomeMessage(name) {
  return `환영합니다, ${name}님!`;
}

console.log(welcomeMessage("홍길동")); // 출력: 환영합니다, 홍길동님!

 

function welcomeMessage(name) { return `환영합니다, ${name}님!`; } console.log(welcomeMessage("홍길동")); // 출력: 환영합니다, 홍길동님!

 

----------------------------------------------------------------------------------------------------------------------------------

 

 

📌 템플릿 리터럴을 사용하면:

✔ 변수 삽입이 간결해지고,
✔ 여러 줄 문자열 작성이 쉬워지며,
✔ 표현식을 직접 삽입할 수 있어 코드가 더 효율적입니다!