본문 바로가기
JavaScript

template

by SyuMay 2022. 8. 17.
728x90

template

템플릿이란 내장된 표현식을 허용하는 문자열 리터럴이다.

// 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 + "을 배우고 싶다.";
        
// console.log("나는" + text1 + text2 + 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' 카테고리의 다른 글

replace() | replaceAll()  (2) 2022.08.17
split()  (2) 2022.08.17
toLowerCase() | toLowerCase()  (2) 2022.08.17
trim()  (2) 2022.08.17
indexOf() | lastindexOf()  (8) 2022.08.16

댓글


자바스크립트 사진

JavaScript

자세히보기