JAVASCRIPT | 문자열

문자열(String)에 대해 알아보자 !

문자열 결합과 내장된 표현식을 허용하는 문자열 리터럴, 템플릿 문자열에 대해 알아봅시다.

---

01. 문자열(String) 결합 / 숫자(Numner) 결합

여러 문자열을 합치기 위해 + 연산자와 ' '(띄어쓰기) 등을 활용하였습니다.

//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 = "핵심";

//나는 모던(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 + "을 배우고 싶다."

번호	기본값	메서드	리턴값

02. 템플릿 문자열

``(백틱)을 사용해 문자열을 감싸서 표현해주며, ${표현식} 을 통해 자바스크립트 문법을 사용할 수 있습니다.

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

번호	기본값	메서드	리턴값