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

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

템플릿 리터럴은 백틱(`) 문자로 구분된 리터럴로, 여러 줄 문자열 , 포함된 표현식을 사용한 문자열 보간 및 태그가 지정된 템플릿 이라는 특수 구성을 허용 합니다.
따옴표 대신 ``(백틱) 문자로 문자열을 감싸서 만드는데 ${} 안에 표현식을 넣어 값이나 간단한 식 등 자바스크립트 문법을 문자열 안에 사용할 수 있습니다.

번호	기본값	메서드	리턴값
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;

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

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

예제

문자열을 작성하는데 ${}으로 원하는 변수의 값을 넣고 쭉 작성하면 됩니다.

var string1 = '안녕하세요?';
var name = 'CrackCo'
var string2 = '입니다.';
var result = `${string1} ${name}${string2}`
console.log(result);
// 안녕하세요? CrackCo입니다.

반응형

'Javascript' 카테고리의 다른 글

split()  (5)	2022.08.17
대/소문자 변경과 공백 제거  (5)	2022.08.17
정규표현식  (10)	2022.08.16
slice() / substring() / substr()  (12)	2022.08.16
indexOf() / lastIndexOf()  (9)	2022.08.16