문자열 객체 (1) 문자열 결합 / 템플릿 문자열

⭐️ 문자열 객체 ( 문자열 결합 / 템플릿 문자열 ) ⭐️

---

01. 표준 내장 객체의 종류 : 문자열 객체

표준 내장 객체(Standard Built-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 말하며, 다른 객체의 기초가 되는 핵심적인 객체 입니다.
내장 객체의 종류에는 Object, Fuction, String, Array, Math, Number, Event, Boolean, Data, RegExp 등이 있습니다.
그 중에서 문자열 객체(String Object)는 문자열을 저장/관리하기 위해 사용하는 객체를 의미합니다.

   ___ 참고하기 ___
  `1   문자열을 생성할 때는 ''"" 따옴표를 사용하거나, new 키워드를 이용합니다.
  `2   문자열 객체는 불변성이 있으며, 이로써 메모리 공간의 절약과 보안성 및 동시성의 특징도 함께 갖습니다.
      

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

템플릿 문자열은 내장된 표현식을 허용하는 문자열 리터럴(중괄호{ }와 같은 것)입니다.
문자열 결합을 위해 좀더 직관적이고 편하게 사용하기 위한 기능을 의미합니다.

    // (+)로 표현하는 문자열 결합 또는 숫자 결합의 예시 : 1번, 2번, 3번
    // 결합(+)이 많아지면 직관적이지 않고 복잡해짐.
 
// 1번 리턴 ----------------------------------------------------------------
    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 ;
 
// 2번 리턴 ----------------------------------------------------------------
    const num1 = 100;
    const num2 = 200;
 
    document.querySelector(".sample01_N2").innerHTML = "2";
    document.querySelector(".sample01_Q2").innerHTML = "100, 200";
    document.querySelector(".sample01_M2").innerHTML = "숫자(num) 결합";
    document.querySelector(".sample01_P2").innerHTML = num1 + num2 ;
 
    const text1 = "모던";
    const text2 = "자바스크립트";
    const text3 = "핵심";
 
// 3번 리턴 ----------------------------------------------------------------
    // "나는 모던(modern) 자바스크립트(javascript) 핵심을 배우고 싶다."의 결과값을 내려면?
 
    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 + "을 배우고 싶다.";
 
// 4번 리턴 ----------------------------------------------------------------
    // 템플릿 문자열 사용 : 문자열을 만들 때 큰따옴표("") 대신 백틱(`)을 사용하고, 변수를 넣고자 하는 부분에 ${ } 키워드를 사용해 변수를 넣어줍니다.
    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}을 배우고 싶다.`;