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

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

간단하게 말해 내장된 표현식을 허용하는 문자열 리터럴입니다. 아래는 예시 입니다.

const str1 = "강아지"
const str2 = "고양이"
const str3 = "귀엽다"
document.querySelector(".지정할 곳").innerHTML = "나는 " + str1 + "와 " + str2 + "가 " + str3 + "고 생각하고 있다."
document.querySelector(".지정할 곳").innerHTML = `나는 ${str1} 와 ${고양이}가 ${귀엽다}고 생각하고 있다`;

숫자와 문자 등 여러 방식은 아래쪽을 참고해주세요.

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

 

     //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;

    const num1 = 100;
    const num2 = 200;
    
    //02
    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;

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

    //나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다.
    
    //03
    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 + "을 배우고 싶다.";

    //04
    document.querySelector(".sample01_N4").innerHTML = "4";
    document.querySelector(".sample01_Q4").innerHTML = "모던,자바스크립트,핵심";
    document.querySelector(".sample01_M4").innerHTML = "탬플릿 문자열";
    document.querySelector(".sample01_P4").innerHTML = `나는 ${text1}(modern) ${text2}(javascript) ${text3}을 배우고 싶다.`;