템플릿 리터럴 ${} 로 문자열 쉽게 다루자

템플릿 리터럴(Templage Literal)은 ES6에서 도입된 문자열 처리 방법으로, 기존의 문자열 연결이나 문자열 정의 방식보다 더 직관적이 강력한 기능을 제공한다.

 

1. 기본 문법

const message = `Hello, World!`;
console.log(message); // Hello, World!

 

템플릿 리터럴은 백틱(backtick, `)으로 문자열을 감싸서 정의한다.

---

 

2. 주요 기능

(1) 표현식 삽입

템플릿 리터럴은 ${}구문을 사용해 문자열에 변수나 표현식의결과를 삽입할 수 있다.

const name = "Alice";
const age = 30;

const greeting = `My name is ${name}, and I am ${age} years old.`;
console.log(greeting); // My name is Alice, and I am 30 years old.

// 표현식 사용 가능
const sum = `2 + 3 = ${2 + 3}`;
console.log(sum); // 2 + 3 = 5

 

(2) 멀티라인 문자열 (Multiline Strings)

템플릿 리터럴은 줄바꿈을 포함한 여러 줄 문자열을 쉽게 작성할 수 있다.

const multiLine = `This is line 1.
This is line 2.
This is line 3.`;

console.log(multiLine);
/*
This is line 1.
This is line 2.
This is line 3.
*/

 

기존에는 \n을 사용하거나, 문자열을 줄마다 연결해야 했다.

const oldWay = "This is line 1.\n" +
               "This is line 2.\n" +
               "This is line 3.";

 

---

3. 템플릿 리터럴 활용 예제

(1) HTML 템플릿

템플릿 리터럴은 HTML문자열을 작성할 때 매우 유용하다.

const title = "Hello";
const content = "This is a template literal example.";

const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

console.log(html);
// <div>
//   <h1>Hello</h1>
//   <p>This is a template literal example.</p>
// </div>

 

 

(2) 문자열 내 계산 결과 포함

표현식 삽입 기능으로 문자열 내에서 동적으로 계산된결과를 포함 할 수 있다.

const price = 100;
const tax = 0.1;

const totalPrice = `The total price is ${price + price * tax} dollars.`;
console.log(totalPrice); // The total price is 110 dollars.

 

(3) 함수 결과 삽입

템플릿 리터럴 안에서 함수 호출 결과를 바로 삽입할 수 있다.

function formatName(firstName, lastName) {
  return `${lastName}, ${firstName}`;
}

const fullName = formatName("John", "Doe");
const message = `Your formatted name is: ${fullName}`;
console.log(message); // Your formatted name is: Doe, John

 

(4) 동적 문자열 처리

템플릿 리터럴을 사용해 조건에 따라 동적으로 문자열을 구성할 수 있다.

const isLoggedIn = true;
const userMessage = `You are ${isLoggedIn ? "logged in" : "logged out"}.`;
console.log(userMessage); // You are logged in.

 

---

 

4. 템플릿 리터럴의 장점

1. 가독성 향상

• 변수나 표현식을 문자열에 자연스럽게 포함
• 멀티라인 문자열 작성 가능

2. 유연한 문자열 생성

• 조건부 처리, 함수 호출 결과 포함 등 동적 문자열 작성에 유리

3. 주바꿈 및 특수문자 처리 용이

• 줄바꿈을 포함한 문자열을 직관적으로 작성 가능

4. HTML 및 코드 템플릿 작성에 유용

• HTML, SQL, Markdown 등 여러 문자열을 템플릿으로 작성 가능

---

5. 기존 방식과 비교

기존방식

const name = "Alice";
const age = 30;
const message = "My name is " + name + " and I am " + age + " years old.";
console.log(message); // My name is Alice and I am 30 years old.

 

템플릿 리터럴

const name = "Alice";
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // My name is Alice and I am 30 years old.