JavaScript에서 템플릿 문자열 중첩하기

JavaScript의 템플릿 문자열(템플릿 리터럴)은 백틱(``)으로 감싸 정의하며, ${} 구문을 사용해 변수나 함수 호출 결과를 손쉽게 삽입할 수 있습니다. 특히 이 치환식 안에 또 다른 템플릿 문자열을 작성하는 중첩(nesting) 기법을 활용하면 복잡한 문자열 조합도 가독성 있게 처리할 수 있습니다.

예제 코드

다음은 'CLICK HERE' 버튼을 클릭했을 때, 중첩된 템플릿 문자열을 사용해 성과 이름을 합친 전체 이름(fullName)을 화면에 출력하는 예제입니다.

<!DOCTYPE html>
<html lang="en">
<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>Nesting template strings in JavaScript</h1>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to display the fullName using nested template string</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function fullName(fName, lName) {
        return fName + " " + lName;
    }
    let firstName = "Rohan";
    let lastName = "Sharma";
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = `FirstName = ${firstName} and lastname = ${lastName} and
        fullname = ${fullName(
            `${firstName}`,
            `${lastName}`
        )}`;
    });
</script>
</body>
</html>

코드 설명

fullName() 함수는 이름(fName)과 성(lName)을 인자로 받아 두 값을 하나의 문자열로 결합한 뒤 반환합니다.
버튼을 클릭하면 바깥쪽 템플릿 문자열 내부에서 ${fullName(...)}이 호출되고, 그 인자 자리에 ${firstName}, ${lastName}이라는 내부 템플릿 문자열이 각각 들어갑니다.
최종 결과는 .result 클래스 요소의 innerHTML에 대입되어 화면에 표시됩니다.

출력 결과

페이지를 처음 열었을 때는 결과 영역이 비어 있습니다. 'CLICK HERE' 버튼을 클릭하면 −

JavaScript에서 템플릿 문자열 중첩하기 – 예제와 실행 결과

위와 같이 firstName과 lastName, 그리고 중첩된 템플릿 문자열로 계산된 fullName까지 한 번에 출력되는 것을 확인할 수 있습니다. 이처럼 템플릿 문자열을 중첩하면 여러 단계의 문자열 조합을 별도의 변수 없이 깔끔하게 처리할 수 있다는 장점이 있습니다.