728x90
문자열(string) 결합
문자열을 합칠 때는 "+" 연산자를 사용하면 됩니다. 문자열 변수를 할칠 때도 str1 + str2 + str3 이렇게 "+" 연산자를 사용하면 됩니다. 하지만, 더욱 간단하게 결합할 수 있는 방법이 있습니다. 오늘은 템플릿 문자열에 대해 알아보겠습니다.
템플릿 문자열
템플릿 문자열은 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴입니다.
| 번호 | 기본값 | 메서드 | 리턴값 |
|---|---|---|---|
//01. 문자열(string) 결합
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. 숫자(number) 결합
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. 문자열(string) 결합
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}을 배우고 싶다.`;
728x90
반응형
'Javascript' 카테고리의 다른 글
| [javascript]split() (2) | 2022.08.17 |
|---|---|
| [javascript]소문자 / 대문자 / 공백 (2) | 2022.08.17 |
| [javascript]indexOf() / lastIndexOf() (2) | 2022.08.16 |
| [javascript]slice() / substring() / substr() (2) | 2022.08.16 |
| [javascript]정규표현식(RegExp) 객체 (1) | 2022.08.16 |
댓글