ES6 템플릿 문자열(Template Strings)은 문자열을 조합하는 새로운 방식입니다. 기존에도 join(), concat() 같은 메서드로 문자열을 합칠 수 있었지만, 템플릿 문자열은 그 어느 방법보다 가독성이 뛰어나고 세련된 접근 방식입니다. 따옴표를 이스케이프하기 위한 백슬래시(\)가 필요 없고, 코드를 지저분하게 만들던 플러스(+) 연산자 반복도 더 이상 없습니다.
concat()과 join()을 사용하는 기존 방식
예제
아래 예제에서는 join()과 concat() 메서드를 사용해 문자열을 조합합니다. 코드를 자세히 살펴보면 상당히 복잡하고 지저분해 보이는 것을 알 수 있습니다.
<html>
<body>
<script>
const platform = 'Tutorix';
const joinMethod = ['The', 'best', 'e-learning', 'platform', 'is', platform].join(' ');
document.write(joinMethod);
document.write("</br>");
const concatMethod = " ".concat('The ', 'best ', 'e-learning ', 'platform ', 'is ', platform);
document.write(concatMethod);
</script>
</body>
</html>
실행 결과
The best e-learning platform is Tutorix The best e-learning platform is Tutorix
ES6 템플릿 문자열을 사용하는 방식
예제
아래 예제에서는 템플릿 문자열 방식으로 문자열을 조합합니다. 다른 방식과 비교하면 코드가 훨씬 간결하고 읽기 쉽습니다. 백틱(`)으로 문자열을 감싸고, 변수나 표현식은 ${} 구문 안에 넣기만 하면 됩니다.
<html>
<body>
<script>
const platform = 'Tutorix';
const templateString = `The best e-learning platform is ${platform}`;
document.write(templateString);
</script>
</body>
</html>
실행 결과
The best e-learning platform is Tutorix
템플릿 문자열의 장점 정리
- 뛰어난 가독성: 최종 출력 형태가 코드에 그대로 드러나므로 의도를 한눈에 파악할 수 있습니다.
- 간결한 문법: 배열 조작이나 메서드 체이닝 없이 하나의 문자열로 처리됩니다.
- 표현식 삽입 가능: ${} 안에는 단순 변수뿐 아니라 연산식이나 함수 호출도 넣을 수 있습니다. 예: `${price * count}`
- 멀티라인 지원: 줄바꿈 문자(\n) 없이 백틱 안에서 자유롭게 여러 줄 문자열을 작성할 수 있습니다.
- 따옴표 충돌 걱정 없음: 작은따옴표와 큰따옴표를 이스케이프하지 않고도 함께 사용할 수 있습니다.
이처럼 ES6 템플릿 문자열은 문자열 조합 작업을 훨씬 직관적이고 유지보수하기 좋게 만들어 주며, 현대 JavaScript 개발에서 필수적인 문법으로 자리 잡았습니다.