본문 바로가기
JAVASCRIPT

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

by 코빈_ 2022. 8. 17.

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

템플릿 문자열은 내장된 표현을 사용하는 문자열이다.

번호 기본값 메서드 리턴값
1 자바스크립트, 제이쿼리 문자열 결합 자바스크립트제이쿼리
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 = "문자열 결합";
    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;
    // 자바스크립트 제이쿼리

    //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 + "을 배우고 싶다";

    //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}을 배우고 싶다.`;

'JAVASCRIPT' 카테고리의 다른 글

메서드 (split)  (1) 2022.08.17
메서드 (toUpperCase / toLowerCase)  (2) 2022.08.17
정규식 표현  (4) 2022.08.16
메서드 (indexOf / lastIndexOf)  (3) 2022.08.16
메서드 (slice / substring / substr)  (2) 2022.08.16

댓글


INFORMATION

javascript

css

html