문자열 결합 / 템플릿 문자열 알아보자~~!!

01. 문자열 : 문자열 결합 / 템플릿 문자열

템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴이다.

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

// 01번
const str1 = "자바스크립트";
const str2 = "제이쿼리";

document.querySelector(".sample01_N1").innerHTML="1";
document.querySelector(".sample01_Q1").innerHTML="자바스크립트, 제이쿼리";
document.querySelector(".sample01_M1").innerHTML="문자열(string) 결합";
document.querySelector(".sample01_P1").innerHTML=str1 +" "+str2;

// 02번
const num1 = 100;
const num2 = 200;

document.querySelector(".sample01_N2").innerHTML="2";
document.querySelector(".sample01_Q2").innerHTML="100, 200";
document.querySelector(".sample01_M2").innerHTML="숫자(number) 결합";
document.querySelector(".sample01_P2").innerHTML=num1 +" "+num2;

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

document.querySelector(".sample01_N3").innerHTML="3";
document.querySelector(".sample01_Q3").innerHTML="모던, 자바스크립트, 핵심";
document.querySelector(".sample01_M3").innerHTML="문자열(string) 결합";
document.querySelector(".sample01_P3").innerHTML="나는 " + text1 +"(modern) "+ text2 +"(javascript) "+ text3 + "을 배우고 싶다.";
document.querySelector(".sample01_N4").innerHTML="4";
document.querySelector(".sample01_Q4").innerHTML="모던, 자바스크립트, 핵심";
document.querySelector(".sample01_M4").innerHTML="템플릿 문자열";
document.querySelector(".sample01_P4").innerHTML=`나는 ${text1}(modern) ${text2}(modern) ${text3}(modern)`;