템플릿 문자열은 변수나 연산 결과를 문자열 안에 자연스럽게 삽입할 수 있는 특별한 형태의 문자열이다. 템플릿이라는 말 그대로 일정한 틀을 가진 문자열이라고 생각하면 된다. 코드에서 변수를 활용해 문장을 만들 때 템플릿 문자열을 사용하면 코드가 훨씬 가독성 있게 깔끔해지고 작성도 쉬워진다.
자바스크립트에서 기본적인 문자열 연결을 할 때는 보통 + 연산자를 사용하는데, 이 방식은 한쪽이 문자열이면 두 값을 모두 문자열로 변환해 연결한다. 예를 들어:
// 일반적인 문자열 연결 방식
const name = 'Alice';
const age = 25;
console.log("안녕하세요, 저는 " + name + "이고, 나이는 " + age + "살입니다.");위 코드에서는 + 연산자를 반복적으로 사용해 연결하다 보니 문장이 길어질수록 가독성이 떨어진다. 코드의 의미는 이해되지만, 길어지고 복잡해진 연결 과정이 눈에 잘 들어오지 않는다는 문제가 있다. 특히 변수를 추가하거나 수정할 때마다 +를 반복적으로 입력해야 하므로 코드 작성이 귀찮아지기도 한다.
이런 문제를 해결하기 위해 등장한 것이 바로 템플릿 문자열이다. 템플릿 문자열은 기존의 문자열처럼 큰따옴표("), 작은따옴표(') 대신 백틱(`)을 사용해 문자열을 감싼다. 템플릿 문자열 내부에서는 ${ } 를 이용해 변수나 표현식을 직접 삽입할 수 있어 훨씬 깔끔하게 코드를 작성할 수 있다.
템플릿 문자열 사용법
템플릿 문자열을 활용하여 위의 예제를 다시 작성해보자.
// 템플릿 문자열을 이용한 문자열 연결
const name = 'Alice';
const age = 25;
console.log(`안녕하세요, 저는 ${name}이고, 나이는 ${age}살입니다.`);템플릿 문자열을 사용하면 + 없이도 변수와 문자열을 한 번에 연결할 수 있다. 백틱(`) 안에 ${변수명}을 적어주기만 하면 자바스크립트가 자동으로 해당 변수의 값을 문자열 안에 삽입해준다. 두 코드를 비교해보면, 템플릿 문자열을 사용한 쪽이 훨씬 간결하고 가독성이 높다는 것을 알 수 있다.
템플릿 문자열의 장점
템플릿 문자열의 가장 큰 장점은 가독성이다. 문자열과 변수, 표현식이 자연스럽게 이어져 있어 코드가 한눈에 들어온다. 그리고 문자열을 여러 줄로 나눠서 작성하는 경우에도 백틱만 사용하면 쉽게 작성할 수 있다.
또한 템플릿 문자열은 단순히 변수만 삽입하는 것이 아니라, 표현식이나 함수 호출 결과도 삽입할 수 있다. 예를 들어, 아래처럼 함수의 반환값을 템플릿 문자열에 넣어볼 수 있다.
템플릿 문자열과 함수 호출 예제
템플릿 문자열은 변수뿐만 아니라, 계산식이나 함수의 반환값도 바로 삽입할 수 있다. 예를 들어, 어떤 숫자의 두 배를 구하는 함수를 만들고 그 결과를 템플릿 문자열에 넣어보자.
// 숫자의 두 배를 계산하는 함수와 템플릿 문자열 예제
const number = 3;
// 숫자의 두 배를 반환하는 함수
function getTwice(x) {
return x * 2;
}
// 템플릿 문자열로 함수 결과를 포함하여 출력
console.log(`숫자 ${number}의 두 배는 ${getTwice(number)}입니다.`);위 코드에서 ${number}는 number 변수의 값인 3이 되고, ${getTwice(number)}는 3 * 2의 결과인 6이 되어 문자열에 그대로 삽입된다. 최종 출력은 숫자 3의 두 배는 6입니다.가 된다. 템플릿 문자열 덕분에 함수 호출과 변수 연결이 한 줄에 해결되면서 코드가 더 단순해졌다.
템플릿 문자열의 주요 특징
템플릿 문자열에서는 ${ } 구문 안에 변수뿐 아니라, 계산식, 함수 호출 등 다양한 표현식을 넣을 수 있다. 자바스크립트는 이 부분을 자동으로 계산한 후 결과를 문자열에 포함시켜준다. + 연산자를 생략할 수 있어 코드가 더 간결해지고 실수 가능성도 줄어든다.
템플릿 문자열의 대표적인 사용 예는 다음과 같다:
// 상품 정보와 계산된 결제 금액을 템플릿 문자열로 출력
const item = 'apple';
const price = 1000;
const quantity = 5;
console.log(`주문하신 상품은 ${item}이고, 총 금액은 ${price * quantity}원입니다.`);
이 예제에서 ${price * quantity}는 1000 * 5의 계산 결과인 5000으로 변환되어 출력된다. 템플릿 문자열을 사용하면 변수, 계산식, 함수 결과 등을 자연스럽게 포함시킬 수 있어 코드가 직관적이고 이해하기 쉬워진다.
요약
- 템플릿 문자열은 백틱(
`)을 사용해 감싼 문자열이다.- 템플릿 문자열 내부에서는
${ }를 통해 변수, 표현식, 함수 호출 결과를 삽입할 수 있다.- 덧셈 연산자(
+) 없이도 문자열을 간결하게 작성할 수 있어 가독성이 좋고 코드 작성이 쉬워진다.
템플릿 문자열을 활용하면 더하기 연산자 없이도 변수를 포함한 문자열을 쉽게 작성할 수 있어, 긴 문장이나 복잡한 문자열을 다룰 때 훨씬 유리하다. 백틱과 ${ } 구문을 기억해 두면 앞으로 코드 작성이 훨씬 편해질 것이다.
