1.5.3 템플릿 리터럴

템플릿 리터럴은 ES6에서 도입된 새로운 문자열 리터럴 유형입니다. 기존의 따옴표(' 또는 ")로 감싸는 문자열 대신, 백틱(`)을 사용하여 여러 줄에 걸친 문자열을 작성하고, 변수 삽입 및 표현식을 간편하게 사용할 수 있게 해줍니다.

예제 1: 템플릿 리터럴로 문자열 만들기

const name = '홍길동';
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // 안녕하세요, 홍길동님!

예제 2: 여러 줄 문자열

기존의 문자열 리터럴을 사용할 경우, 여러 줄을 출력하려면 \n을 사용해야 했습니다. 하지만 템플릿 리터럴을 사용하면 더 직관적으로 코드를 작성할 수 있습니다.

const message = `안녕하세요,
이것은
여러 줄 문자열입니다.`;
console.log(message);
// 안녕하세요,
// 이것은
// 여러 줄 문자열입니다.

실습 1: 사용자 입력 출력

HTML에서 간단한 입력 폼을 만들어 사용자 이름을 입력받고, 템플릿 리터럴을 통해 사용자에게 인사하는 메시지를 출력하는 기능을 만들어 보겠습니다.

<input type="text" id="username" placeholder="이름을 입력하세요">
<button id="greetBtn">인사하기</button>
<p id="greetingMessage"></p>
<script>
const greetBtn = document.getElementById('greetBtn');
const greetingMessage = document.getElementById('greetingMessage');

// 버튼 클릭 시 인사 메시지 출력
greetBtn.addEventListener('click', () => {
    const name = document.getElementById('username').value;
    greetingMessage.textContent = `안녕하세요, ${name}님!`;
});
</script>

응용: 스타일이 적용된 메시지

템플릿 리터럴을 사용하여 인사 메시지에 CSS 스타일을 적용해 볼 수 있습니다. 다음과 같이 예쁘게 꾸며 보세요.

<p id="styledGreetingMessage" style="font-size: 20px; color: blue;"></p>
<script>
// 버튼 클릭 시 인사 메시지 스타일링
greetBtn.addEventListener('click', () => {
    const name = document.getElementById('username').value;
    styledGreetingMessage.innerHTML = `<strong>안녕하세요, ${name}님!</strong>`;
});
</script>

정리

템플릿 리터럴을 사용하면 문자열을 더욱 유연하고 직관적으로 작업할 수 있습니다. 변수나 표현식을 쉽게 삽입할 수 있으며, 여러 줄 문자열을 작성할 때도 유용합니다.

이와 같은 방법으로 템플릿 리터럴을 활용하여 여러분의 웹 애플리케이션을 더욱 풍부하게 만들어 가시기 바랍니다.