자바스크립트의 템플릿 기능은 유용한 기능을 제공하고 있다. 리터럴이라 불리는 것으로 하나의 문자열 템플릿을 만들어 놓고 서로 다른 값들을 출력할 수 있다. 문서 템플릿을 만들고 서로 다른 여러 문서들을 만들 수 있다는 것을 암시한다. 게시판의 상세페이지에서 꽤 유용하게 사용될 수 있고, 문서 양식을 만들어 서비스를 제공한다면 괜찮은 것을 만들 수 있을 것이다.
자바스크립트 템플릿 리터럴 치환자
javascript template literal
자바스크립트는 jsp 와 비슷한 문법을 가지고 있다.
${ ~ } 이 구문이 그것이다.
자바스크립트의 리터럴에 있는 기능으로 문자열을 치환하는 기능을 한다.
${ ~ } 구문에 변수명을 입력하면 변수에 입력된 값으로 바뀌는 역할을 한다.
그렇기에 웹에서 문서를 템플릿 형태로 만들었다면 ${ ~ } 문자를 이용하여 여러형태의 다른 문서들을 만들 수 있다.
사용법
템플릿은 이미 알고 있다.
기준이 되는 문서를 말하고 변수 하나만 바꿔줘도 다른 내용의 여러 문서들을 만들 수 있다.
게시판의 상세 페이지가 그것이기도 하다.
${ ~ } 구문을 사용하는 방법은 어렵지 않다.
이 구문을 사용할 때 문자열은 백틱 ` 문자를 사용하도록 한다.
let vString = "문자열"
let vPring = `{$vString}을 출력합니다.`;샘플코드
위의 예시로 문자열을 직접 치환해 보도록 한다.
이 방법을 알면 여러 형태의 문서를 좀 더 편하게 제공할 수 있을 것이다.
아래의 코드를 보자.
자바스크립트의 백틱 문자와 함께 치환자를 사용하고 있는 것을 볼 수 있다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 템플릿 리터럴 </h2>
<script>
console.log("----------");
let vComp = ``;
let vGrp = ``;
let vMem = ``;
let vTemplate = ``;
vComp = `YG Ent`;
vGrp = `블랙핑크`;
vMem = `지수, 제니, 로제, 리사`;
vTemplate = ``
vTemplate += `그룹 ${vGrp}의 소속사는 ${vComp} 이다.`;
vTemplate += `\n\r`;
vTemplate += `멤버는 ${vMem} 이다.`;
console.log(vTemplate);
console.log("----------");
vComp = `SBS Project`;
vGrp = `육하원칙`;
vMem = `슬기, 미주, 유아, 의진, 미나, 은진`;
vTemplate = ``
vTemplate += `그룹 ${vGrp}의 소속사는 ${vComp} 이다.`;
vTemplate += `\n\r`;
vTemplate += `멤버는 ${vMem} 이다.`;
console.log(vTemplate);
console.log("----------");
</script>
</body>
</html>결과 화면을 보자.
제대로 치환된 것을 볼 수 있다.
반응형
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 템플릿 리터럴 html 코드 만들기 (0) | 2021.11.23 |
|---|---|
| 자바스크립트 문자열 템플릿 수식과 표현식 넣기 (0) | 2021.11.22 |
| 자바스크립트 백틱 문자열을 자유자재로 입력 javascript backtic (0) | 2021.11.21 |
| javascript endsWith method 자바스크립트 문자열 뒤에서 찾기 메서드 (0) | 2021.11.21 |
| 자바스크립트 문자열 검색 startsWith 메서드 문자열이 지정한 문자열로 시작하는지 판단 javascript (0) | 2021.11.20 |
댓글