자바스크립트 템플릿 리터럴은 ES6에서 소개된 기능으로, 문자열을 보다 쉽고 간편하게 작성할 수 있도록 도와줍니다. 이번 글에서는 템플릿 리터럴의 기능과 사용법에 대해 알아보겠습니다.

템플릿 리터럴이란?

템플릿 리터럴은 역따옴표 (backtick) ` 로 감싸진 문자열입니다. 이렇게 작성된 템플릿 리터럴 안에서는 변수, 표현식, 줄바꿈 등을 보다 쉽게 표현할 수 있습니다.

템플릿 리터럴의 가장 큰 특징은 “보간 표현식”이라 불리는 기능으로, 변수나 표현식을 ${ }로 감싸서 문자열 안에 삽입할 수 있다는 것입니다.

아래의 예시를 통해 템플릿 리터럴의 사용법을 자세히 살펴보겠습니다.

const name = "John";
const age = 30;
const message = `My name is ${name} and I am ${age} years old.`;

console.log(message);

위의 코드에서는 템플릿 리터럴을 사용하여 변수 name과 age를 문자열에 삽입하였습니다. 출력 결과는 다음과 같습니다.

My name is John and I am 30 years old.

템플릿 리터럴의 다른 기능

템플릿 리터럴은 변수 보간뿐만 아니라 더 다양한 기능을 제공합니다. 아래의 몇 가지 기능을 살펴보겠습니다.

줄바꿈

일반적인 문자열에서는 줄바꿈을 위해 이스케이프 시퀀스 \n을 사용해야 합니다. 하지만 템플릿 리터럴에서는 그냥 줄바꿈을 사용할 수 있습니다.

const message = `Hello,
World!`;

console.log(message);

위의 코드에서는 템플릿 리터럴의 줄바꿈 기능을 사용하여 여러 줄에 걸친 문자열을 작성하였습니다. 출력 결과는 다음과 같습니다.

Hello,
World!

표현식

템플릿 리터럴 안에서는 JavaScript 표현식을 사용할 수 있습니다. 표현식은 ${ }로 감싸며, 복잡한 계산이나 함수 호출 등을 포함할 수 있습니다.

const x = 10;
const y = 5;
const sum = `The sum of ${x} and ${y} is ${x + y}.`;

console.log(sum);

위의 코드에서는 템플릿 리터럴 안에서 변수 x와 y의 값을 더한 결과를 표현식으로 사용하였습니다. 출력 결과는 다음과 같습니다.

The sum of 10 and 5 is 15.

태그드 템플릿

태그드 템플릿은 템플릿 리터럴을 함수의 인자로 넘겨주는 방식입니다. 함수는 템플릿 리터럴을 다루는 동작을 정의할 수 있으며, 이를 활용하여 동적인 문자열 생성이 가능합니다.

function greet(name) {
  return `Hello, ${name}!`;
}

const person = "John";
const greeting = greet`My name is ${person}.`;

console.log(greeting);

위의 코드에서는 greet 함수가 템플릿 리터럴을 다루는 함수로 정의되었습니다. 이 함수는 인자로 받은 name을 기반으로 동적인 인사말을 생성합니다. 출력 결과는 다음과 같습니다.

Hello, John!

결론

자바스크립트 템플릿 리터럴은 문자열을 더욱 효율적이고 쉽게 작성할 수 있도록 도와줍니다. 변수 보간뿐만 아니라 줄바꿈, 표현식, 태그드 템플릿 등의 다양한 기능을 제공하여 더 유연하고 가독성 높은 코드를 작성할 수 있게 해줍니다.

ES6 이상의 버전을 사용하는 개발자라면, 템플릿 리터럴을 적극적으로 활용하여 문제를 해결하는데 도움이 될 것입니다.