ES6 템플릿 리터럴 (Template Literals) 완벽 가이드
ECMAScript 6(ES6)에서 도입된 템플릿 리터럴(Template Literals)은 기존의 문자열 처리 방식을 개선하여 더 직관적이고 강력한 방법으로 문자열을 다룰 수 있게 해줍니다. 템플릿 리터럴을 사용하면 문자열 보간(String Interpolation), 여러 줄 문자열(Multiline Strings), 표현식 삽입(Expression Interpolation) 등이 간편해집니다.
템플릿 리터럴 기본 사용법
템플릿 리터럴은 백틱(Backtick)(`)으로 감싸서 사용합니다. 기존 문자열 리터럴과 다르게, 템플릿 리터럴은 다음과 같은 기능들을 제공합니다.
const name = "홍길동";
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // "안녕하세요, 홍길동님!"1. 문자열 보간 (String Interpolation)
템플릿 리터럴을 사용하면 변수나 표현식을 ${} 안에 넣어 문자열에 쉽게 삽입할 수 있습니다.
const a = 10;
const b = 20;
console.log(`a + b = ${a + b}`); // "a + b = 30"2. 여러 줄 문자열 (Multiline Strings)
기존 문자열에서는 여러 줄을 만들기 위해 \n이나 문자열 연결을 사용해야 했습니다. 템플릿 리터럴을 사용하면 백틱 안에 줄바꿈을 그대로 포함할 수 있습니다.
const message = `여러 줄로 된
문자열을
사용할 수 있습니다.`;
console.log(message);
/*
여러 줄로 된
문자열을
사용할 수 있습니다.
*/3. 표현식 삽입 (Expression Interpolation)
템플릿 리터럴 안에서는 단순히 변수만 삽입하는 것이 아니라, 표현식을 직접 삽입할 수도 있습니다.
const x = 5;
const y = 10;
console.log(`x + y = ${x + y}`); // "x + y = 15"4. 함수 호출 및 연산도 삽입 가능
템플릿 리터럴 안에서는 함수 호출이나 연산도 가능합니다.
function getGreeting() {
return "안녕하세요";
}
console.log(`${getGreeting()}, 여러분!`); // "안녕하세요, 여러분!"5. 태그드 템플릿 리터럴 (Tagged Template Literals)
템플릿 리터럴은 태그 함수와 함께 사용할 수 있습니다. 태그 함수는 템플릿 리터럴의 결과를 변형하거나 처리하는 데 사용됩니다. 태그 함수는 첫 번째 인자로 문자열 배열, 두 번째 이후로는 각 표현식의 결과 값을 받습니다.
function tag(strings, ...values) {
console.log(strings); // ["Hello ", " world", "!"]
console.log(values); // ["beautiful"]
return `${strings[0]}${values[0]}${strings[1]}${strings[2]}`;
}
const output = tag`Hello ${"beautiful"} world!`;
console.log(output); // "Hello beautiful world!"6. 템플릿 리터럴의 특수 문자 처리
템플릿 리터럴 안에서는 기존에 사용되던 특수 문자들도 그대로 사용할 수 있습니다. 예를 들어, 역슬래시를 사용한 특수 문자는 여전히 유효합니다.
const filePath = `C:\\Users\\홍길동\\Documents`;
console.log(filePath); // "C:\Users\홍길동\Documents"기존 문자열 리터럴과의 차이점
템플릿 리터럴과 기존의 문자열 리터럴을 비교해 보면 다음과 같은 차이가 있습니다:
| 기능 | 기존 문자열 리터럴 | 템플릿 리터럴 |
|---|---|---|
| 문자열 보간 | + 연산자를 사용하여 문자열 연결 | ${} 구문으로 직접 삽입 가능 |
| 여러 줄 문자열 | \n을 사용해야 줄바꿈 처리 | 줄바꿈을 그대로 표현 가능 |
| 표현식 삽입 | 불가능 | ${} 안에 표현식 삽입 가능 |
| 태그 함수 사용 | 불가능 | 태그드 템플릿 리터럴로 함수 호출 가능 |
결론
ES6에서 도입된 템플릿 리터럴은 문자열을 다루는 데 있어 훨씬 더 간편하고 유연한 방법을 제공합니다. 문자열 보간, 여러 줄 문자열 및 표현식 삽입을 통해 기존 방식보다 더 직관적이고 간결한 코드를 작성할 수 있습니다. 또한 태그드 템플릿 리터럴을 사용하면 더 강력한 문자열 처리가 가능합니다.
템플릿 리터럴을 잘 활용하면 코드의 가독성과 유지 보수성을 크게 향상시킬 수 있습니다.
