[JavaScript 최신 기능 시리즈] 2일차: JavaScript 템플릿 리터럴 이해하기

2. 템플릿 리터럴

템플릿 리터럴이란 무엇인가?

템플릿 리터럴(Template Literal)은 ES6에서 도입된 새로운 문자열 표기법으로, 백틱(backtick, `)을 사용하여 문자열을 정의합니다. 템플릿 리터럴은 문자열을 더 쉽게 조작할 수 있는 기능들을 제공합니다.

템플릿 리터럴의 기본 사용법

템플릿 리터럴은 백틱(``)을 사용하여 문자열을 감쌉니다.

let greeting = `Hello, World!`;
console.log(greeting);  // 출력: Hello, World!

문자열 내 변수 삽입 (Interpolation)

템플릿 리터럴을 사용하면 문자열 내에서 변수와 표현식을 쉽게 삽입할 수 있습니다. 변수와 표현식을 ${}로 감싸서 사용합니다.

let name = 'Alice';
let message = `Hello, ${name}!`;
console.log(message);  // 출력: Hello, Alice!

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

여러 줄 문자열 (Multiline Strings)

템플릿 리터럴을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있습니다.

let multiLine = `This is a string
that spans multiple
lines.`;
console.log(multiLine);
// 출력:
// This is a string
// that spans multiple
// lines.

태그드 템플릿 (Tagged Template)

태그드 템플릿은 템플릿 리터럴에 태그 함수를 적용하여 문자열을 처리할 수 있는 기능입니다.

1. 기본 태그 함수 사용 예제

function tag(strings, ...values) {
  console.log(strings);
  console.log(values);
  return 'Tagged Template Result';
}

let text = tag`Hello, ${name}! You have ${a + b} new messages.`;
console.log(text);
// 출력:
// [ 'Hello, ', '! You have ', ' new messages.' ]
// [ 'Alice', 15 ]
// Tagged Template Result

2. 사용자 정의 태그 함수

사용자 정의 태그 함수를 작성하여 문자열을 원하는 방식으로 처리할 수 있습니다.

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return `${result}${str}<span class="highlight">${values[i] || ''}</span>`;
  }, '');
}

let highlighted = highlight`Hello, ${name}! You have ${a + b} new messages.`;
console.log(highlighted);
// 출력: Hello, <span class="highlight">Alice</span>! You have <span class="highlight">15</span> new messages.

이스케이프 처리

백틱(``) 안에서 백틱 자체를 사용하려면 이스케이프 문자를 사용해야 합니다.

let escaped = `This is a backtick: \``;
console.log(escaped);  // 출력: This is a backtick: `

결론

템플릿 리터럴은 문자열을 다루는 데 있어 강력하고 유연한 방법을 제공합니다. 변수 삽입, 여러 줄 문자열, 태그드 템플릿 등 다양한 기능을 통해 코드의 가독성과 작성 편의성을 크게 향상시킬 수 있습니다.

다음 글에서는 디스트럭처링 할당에 대해 알아보겠습니다.다음 글에서 만나요!