JavaScript 문자열 보간 완벽 가이드: 템플릿 리터럴 활용법

JavaScript 문자열 보간이란?

ES6(ECMAScript 2015)부터 JavaScript는 템플릿 문자열(Template String)을 지원하며, 이를 통해 문자열 보간(String Interpolation)을 기본적으로 사용할 수 있습니다. 이러한 문자열을 템플릿 리터럴(Template Literals)이라고 부르며, 템플릿 리터럴은 표현식을 내장할 수 있는 특별한 형태의 문자열 리터럴입니다.

템플릿 문자열은 작은따옴표(')나 큰따옴표(") 대신 백틱(``)을 사용한다는 점이 특징입니다. 따라서 템플릿 문자열은 다음과 같이 작성할 수 있습니다.

var greeting = `Hello World!`;

템플릿 문자열은 ${ } 문법으로 작성된 플레이스홀더(placeholder)를 사용해 문자열 치환을 수행할 수 있습니다.

예제 1: 기본적인 플레이스홀더 사용

var name = "Brendan";
console.log(`Hello, ${name}!`);

출력 결과

Hello, Brendan!

예제 2: 템플릿 리터럴과 표현식

템플릿 리터럴 내부에는 단순 변수뿐만 아니라 연산식도 그대로 포함할 수 있습니다.

var a = 10;
var b = 10;
console.log(`The sum of ${a} and ${b} is ${a+b}`);

출력 결과

The sum of 10 and 10 is 20

예제 3: 템플릿 리터럴과 함수 표현식

함수 호출 결과 역시 템플릿 리터럴 안에서 자유롭게 사용할 수 있습니다.

function fn() { return "Hello World"; }
console.log(`Message: ${fn()} !!`);

출력 결과

Message: Hello World !!

여러 줄 문자열 작성하기

템플릿 문자열은 여러 줄에 걸쳐 작성할 수 있습니다. 일반 문자열에서는 줄바꿈마다 \n 이스케이프 문자를 입력해야 하지만, 템플릿 리터럴은 작성한 그대로 줄바꿈이 유지됩니다.

var multiLine = `
    This is
    a string
    with multiple
    lines`;
console.log(multiLine);

출력 결과

This is
a string
with multiple
lines

정리

템플릿 리터럴을 활용하면 복잡한 문자열 연결(concatenation) 없이도 직관적이고 가독성 높은 코드를 작성할 수 있습니다. ES6 이상 환경에서는 동적 문자열을 만들 때 템플릿 리터럴 사용을 적극 권장합니다.