자바스크립트 템플릿 리터럴 문자를 이용하면 html 코드를 동적으로 만들어 데이터를 처리할 수 있다. 가변적인 데이터를 이용하거나 혹은 동적인 처리가 많은 페이지에 적합하다. 물론 이 기능을 몰라도 템플릿화하는 것은 어렵지 않지만 자바스크립트 템플릿 리터럴 문자열을 이용하면 코드의 길이를 줄이고, 유지보수에도 편할 것이다.
자바스크립트 템플릿 html 코드 만들기
자바스크립트를 이용하여 html 템플릿을 만들 수도 있다.
자바스크립트 템플릿 리터럴 문자열을 만들면 가능하다.
여기까지 오면서 자바스크립트 개발시 템플릿을 이용하는 방법을 살펴보았다.
자바스크립트의 리터럴 문자열을 사용하는 방법으로 매우 유용하다.
사용방법
이전에 살펴본 자바스크립트 템플릿 리터럴 문자열을 html 코드로 만들면 된다.
백틱으로 문자열을 감싼 형태로 리터럴 문자열을 사용한다.
dom 스크립트를 이용해 html 문자열을 웹문서에 추가해 주면 된다.
예제는 패싱하고 샘플코드로 바로 넘어가도록 하자.
샘플코드
다음의 샘플코드를 보면 백틱 문자열을 사용하여 자바스크립트 템플릿을 만들 있음을 알 수 있다.
동적인 데이터를 화면에 표현할 때 매우 유용하게 보이는 기능이다.
물론, 이 기능을 몰라도 치환자 형태로 문서를 동적으로 만들 수도 있다.
하지만, 코드 길이가 늘어나는 것은 감수하도록 한다.
위의 것으로 고생을 하기 보다는 자바스크립트 템플릿 구조를 알면 편하게 동적인 데이터를 만들 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 템플릿 리터럴 </h2>
<div id="cont">
</div>
<script>
console.log("----------");
let vKor = 90;
let vEng = 80;
let vMat = 70;
let vTot = 0;
let vAvg = 0;
let vTemplate = ``;
vTemplate += `<hr/>`
vTemplate += `<p>성적표</p>`
vTemplate += `<hr/>`
vTemplate += `<p>국어 ${vKor}점</p>`
vTemplate += `<p>영어 ${vEng}점</p>`
vTemplate += `<p>수학 ${vMat}점</p>`
vTemplate += `<hr/>`
vTemplate += `<p>총점 ${(vKor+vEng+vMat)}점</p>`
vTemplate += `<p>평균 ${(vKor+vEng+vMat)/3}점</p>`
vTemplate += `<hr/>`
console.log(vTemplate);
console.log("----------");
document.getElementById("cont").innerHTML = vTemplate;
</script>
</body>
</html>코드가 길지만 별 거 없다.
변수에는 점수가 있고, 리터럴 문자에는 점수를 치환하고 있다.
총점과 평균의 수식도 가능하다.
마지막으로 dom 스크립트를 이용해 html 문자열을 웹문서에 추가하고 있다.
결과 화면을 보자.
제대로 치환이 되고 있음을 볼 수 있다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 숫자범위와 정밀도 정수형 최대 15자리 부동소수점 17자리 (0) | 2021.11.27 |
|---|---|
| 자바스크립트 숫자형 데이터 javascript numbers (0) | 2021.11.25 |
| 자바스크립트 문자열 템플릿 수식과 표현식 넣기 (0) | 2021.11.22 |
| 자바스크립트 템플릿 리터럴 치환자 javascript template literal (0) | 2021.11.22 |
| 자바스크립트 백틱 문자열을 자유자재로 입력 javascript backtic (0) | 2021.11.21 |
댓글