JavaScript 템플릿 리터럴로 형식화된 문자열 만들기

JavaScript에서는 템플릿 리터럴(Template Literals)을 사용하면 변수나 객체의 값을 손쉽게 문자열에 삽입할 수 있습니다. 백틱(`)으로 문자열을 감싸고 ${} 안에 표현식을 작성하기만 하면 되므로, 기존의 문자열 연결 방식보다 훨씬 직관적이고 가독성이 뛰어납니다.

아래 예제에서는 객체에 저장된 이름, 나이, 학번 값을 템플릿 리터럴로 조합하여 화면에 출력하는 방법을 살펴봅니다.

예제 코드

<!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,
   .sample {
      font-size: 20px;
      font-weight: 500;
      color: blueviolet;
   }
   .sample {
      color: red;
   }
</style>
</head>
<body>
<h1>Formatted Strings Using Template Strings JavaScript</h1>
<div class="sample">
`The person name is ${personObj.name}. His age and rollno are
${personObj.age} and ${personObj.rollno} respectively`
</div>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 personObj 값으로 형식화된 템플릿 문자열을 확인할 수 있습니다</h3>
<script>
   let BtnEle = document.querySelector(".Btn");
   let resEle = document.querySelector(".result");
   let personObj = { name: "Rohan Sharma", age: 12, rollno: 22 };
   let arr = [22, 55, 11, 19, 55];
   BtnEle.addEventListener("click", (event) => {
      resEle.innerHTML = `The person name is ${personObj.name}. His age and rollno are
      ${personObj.age} and ${personObj.rollno} respectively`;
   });
</script>
</body>
</html>

코드 설명

personObj라는 객체에 이름(name), 나이(age), 학번(rollno)이 저장되어 있습니다.
버튼 클릭 이벤트가 발생하면 콜백 함수가 실행되어 템플릿 리터럴 내부의 ${personObj.name}, ${personObj.age}, ${personObj.rollno}가 각각 실제 값으로 치환됩니다.
결과 문자열은 .result 영역의 innerHTML에 삽입되어 화면에 표시됩니다.

출력 결과

JavaScript 템플릿 리터럴로 형식화된 문자열 만들기

'CLICK HERE' 버튼을 클릭하면 다음과 같이 객체의 값이 반영된 문자열이 출력됩니다.

JavaScript 템플릿 리터럴로 형식화된 문자열 만들기

정리

템플릿 리터럴은 단순한 문자열 삽입뿐만 아니라 여러 줄 문자열 작성, 삼항 연산자 등 다양한 표현식 활용도 가능합니다. 복잡한 문자열 조합이 필요할 때는 문자열 연결 연산자(+) 대신 템플릿 리터럴을 사용하는 것이 코드 가독성과 유지보수 측면에서 훨씬 유리합니다.