자바스크립트 Template Literal(템플릿 리터럴) 사용법

템플릿 리터럴이란?

자바스크립트에서 문자열을 처리할 때, 보통은 문자열 연결 연산자인 ‘+’를 사용합니다. 하지만 이 방식은 복잡한 문자열을 생성할 때 가독성이 떨어지고 일일이 따옴표를 넣어줘야 하는 불편함이 있습니다. 이때 사용하는 것이 바로 템플릿 리터럴입니다.

템플릿 리터럴은 백틱(`)으로 문자열을 감싸고, ${} 안에 변수나 식을 적어줌으로써 변수나 식의 결과값을 문자열과 함께 출력할 수 있습니다.

예시 코드:

const name = 'Alice';
const age = 31;

console.log(`이름: ${name}, 나이: ${age}`);

결과값:

이름: Alice, 나이: 31

템플릿 리터럴의 활용

템플릿 리터럴은 문자열 연결 뿐만 아니라 HTML 태그를 생성하는데에도 유용하게 활용됩니다.

예시 코드:

const users = [
  { name: 'Alice', age: 31 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 32 }
];

const userList = `
  

    ${users.map(user => `
이름: ${user.name}, 나이: ${user.age}
`).join('')}
  
`;

document.body.innerHTML = userList;

결과값:

• 이름: Alice, 나이: 31
• 이름: Bob, 나이: 25
• 이름: Charlie, 나이: 32

결론

템플릿 리터럴은 문자열을 다룰 때의 가독성과 편의성을 크게 높여주며, 변수나 식의 값을 쉽게 문자열에 포함시킬 수 있습니다. 따라서 자바스크립트를 사용하는 개발자라면 템플릿 리터럴을 적극적으로 활용해보는 것을 추천합니다.

자바스크립트 Template literal은 문자열을 보다 쉽게 처리할 수 있는 방법입니다.