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

문자열 결합 : 템플릿 문자열

템플릿 문자열은 어떠한 경우에, 어떻게 사용할 수 있을까요? 다음 예제를 통해 템플릿 문자열에 대하여 알아보도록 하겠습니다.

---

문자열 결합

일반적으로 문자열을 결합할 때는 "+" 연산자를 사용합니다. 그 사용 방법은 다음과 같습니다.

const str1 = "자바스크립트";
const str2 = 100;

document.write(str1 + str2 + "제이쿼리" + 100);
document.write(str2 + str1 + "제이쿼리" + 100);

결과보기

자바스크립트100제이쿼리100
100자바스크립트제이쿼리100

위 예제에 나타난 것처럼, "+" 연산자를 사용하면 변수와 문자열, 숫자를 쉽게 결합할 수 있습니다.

템플릿 문자열

템플릿 문자열(Template literals)은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 따옴표 대신 백틱(` `, backtick)을 사용하며, 표현식은 $와 중괄호 {}로 표기합니다.

const text1 = "모던";
const text2 = "자바스크립트";
const text3 = "핵심";

위와 같이 변수가 주어졌을 때, "나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다."라는 값이 출력되도록 문자열을 결합하려면 어떻게 작업해야 할까요?

document.write("나는 " + text1 + "(modern) " + text2 + "(javascript) " + text3 + "을 배우고 싶다.");
document.write(`나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`);

두 가지 방법으로 값을 출력해 보았습니다. 동일한 "나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다." 값이 출력됩니다. 첫 번째 방법은 "+" 연산자를 사용한 방법이고, 두 번째 방법은 템플릿 문자열을 사용한 방법입니다. 변수의 이름을 중괄호 ${ } 안에 입력하고 출력하고자 하는 값을 작성하면, "+" 연산자 없이 보다 간편하게 값을 출력할 수 있습니다.