템플릿 문자열(Template Strings)은 ES6(ECMAScript 2015)에서 새롭게 도입된 문법으로, 문자열 안에 표현식을 간편하게 삽입할 수 있도록 해주는 기능입니다.
기존에는 작은따옴표('')나 큰따옴표("")로 문자열을 감싸고, 변수나 연산 결과를 넣으려면 + 연산자를 사용해야 했습니다. 하지만 템플릿 문자열은 백틱(backtick, ``)으로 문자열을 감싸고, ${} 구문 안에 변수나 수식을 그대로 작성하면 됩니다. 예를 들어 ${a + b}처럼 표현식을 직접 삽입할 수 있어, + 연산자로 문자열을 이어 붙이는 방식보다 훨씬 깔끔하고 가독성이 뛰어납니다.
JavaScript 템플릿 문자열 예제
다음은 두 숫자를 더하고, 그 결과를 템플릿 문자열로 화면에 출력하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript 템플릿 문자열</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 두 숫자를 더한 결과가 표시됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let a = 22;
let b = 44;
function add(a, b) {
return a + b;
}
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = `${a}와 ${b}의 합은 ${add(a, b)} 입니다`;
});
</script>
</body>
</html>
실행 결과
페이지를 실행하면 아래와 같은 화면이 나타납니다.
'CLICK HERE' 버튼을 클릭하면, 템플릿 문자열에 삽입된 표현식들이 계산되어 다음과 같이 결과가 출력됩니다.
핵심 정리
- 템플릿 문자열은 ES6부터 지원되며, 백틱(``)으로 문자열을 감쌉니다.
${}안에 변수, 함수 호출, 산술 연산 등 임의의 JavaScript 표현식을 넣을 수 있습니다.+연산자 없이도 문자열과 값을 자연스럽게 결합할 수 있어 코드 가독성이 크게 향상됩니다.- 여러 줄에 걸친 문자열도 별도의 줄바꿈 처리 없이 그대로 작성할 수 있다는 장점도 있습니다.