[JAVASCRIPT] 템플릿 문자열

자바스크립트 : 문자열 결합 : 템플릿 문자열

지금부터 자바스크립트의 문자열 결합과 문자열 메소드인 템플릿 문자열에 대해 알아봅시다!

---

1. 템플릿 문자열

템플릿 문자열( )은 문자열 결합 메서드로 내장된 표현식을 허용하는 문자열 리터럴입니다.
문자열을 결합할 때 따옴표 대신 ` ` (backtick_백틱)을 사용하며 변수를 넣고자 하는 부분에 ${}를 사용하여 넣어주면 됩니다. 또한 간단한 자바스크립트 문법을 문자열 안에 사용할 수 있습니다.

//01. 문자열(string) 결합
const str1 = "자바스크립트";
const str2 = "제이퀘리";
document.querySelector(".sample01_P1").innerHTML = str1 + str2;

//02. 숫자(number) 결합
const num1 = 100;
const num2 = 200;
document.querySelector(".sample01_P2").innerHTML = num1 + num2;

//03. 템플릿 문자열을 사용한 문자열(string) 결합
//문자열인 (modern)과 (javascript) 추가하기
//나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
const text1 = "모던";
const text2 = "자바스크립트";
const text3 = "핵심";
//일반 문자열 결합
document.querySelector(".sample01_P3").innerHTML = "나는 " + text1 + "(modern) " + text2 + "(javascript) " + text3 + "을 배우고 싶다.";
//백틱과 ${} 사용하여 출력
document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`;

표로 확인해보자!

번호	기본값	메서드	리턴값
1	자바스크립트, 제이쿼리	문자열(string) 결합	자바스크립트제이퀘리
2	100, 200	숫자(number) 결합	300
3	모던, 자바스크립트, 핵심	문자열(string) 결합	나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
4	모던, 자바스크립트, 핵심	템플릿 문자열(string) 결합	나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.

! point !
"" 큰 따옴표로도 출력이 가능하지만 코드가 직관적이지 않고 복잡하다. 때문에 템플릿 문자열 기능을 활용하여 더 가독성 있게 코드를 짜보도록 하자!