자바스크립트 템플릿 문자열은 수식과 표현식을 사용할 수 있다. 단순히 변수의 값을 치환하여 출력하는 것이 아닌 자바스크립트를 개발하는 개발자의 의도대로 문자열을 템플릿화 시킬 수 있다는 것이다. 이것을 이용하면 서버에서 계산하는 것이 아닌 클라이언트에서 계산하고 화면에 출력하는 것이 편할 것이다. 물론, 동적인 데이터 처리에 안성맞춤이다.
자바스크립트 문자열 템플릿 수식과 표현식 넣기
자바스크립트의 템플릿은 수식이나 표현식 같은 것들도 넣을 수 있다.
수식같은 것들은 대부분 서버에서 계산한 값을 그대로 웹페이지에 넣어주면 편하기도 하지만
그렇지 않은 경우에 사용하면 편리하다.
가령 연속된 데이터를 표현하거나 수시로 달라지는 값들이 있을 때 사용하면 좋다.
사용방법
이미 자바스크립트 문자열 템플릿에 대해 기본적인 것은 다루었다.
그 내용과 다른 내용은 없다.
템플릿 리터럴에 수식을 넣어주면 그만인 것이다.
수식을 넣어주면 자바스크립트가 계산하는 것처럼 산술이나 문자식 등을 표현할 수 있다.
let vString = `${수식} ${표현식}`샘플코드
이전에 사용한 코드를 조금 변형하여 사용해 볼 것이다.
크게 변동되는 부분은 없을 것이다.
다만, 자바스크립트 템플릿의 리터럴 구문에 수식이 들어갈 뿐이다.
자바스크립트 템플릿 문자열을 사용할 때는 백틱 문자로 감싸준다는 것을 알아두자.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 템플릿 리터럴 </h2>
<script>
console.log("----------");
let vKor = 90;
let vEng = 80;
let vMat = 70;
let vTot = 0;
let vAvg = 0;
let vTemplate = ``;
vTemplate += `국어 ${vKor}점, 영어 ${vEng}점, 수학 ${vMat}점`;
vTemplate += `\r\n`;
vTemplate += `총점 ${(vKor+vEng+vMat)}점, 평균 ${(vKor+vEng+vMat)/3}점`;
console.log(vTemplate);
console.log("----------");
</script>
</body>
</html>결과화면을 보자.
변수로 설정된 값들이 제대로 치환되고, 제대로 계산되어 화면에 출력되는 것을 알 수 있다.
정말 편하다.
아마 본인은 앞으로 백틱문자와 자바스크립트 템플릿을 자주 사용하게 될 것 같다.
반응형
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 숫자형 데이터 javascript numbers (0) | 2021.11.25 |
|---|---|
| 자바스크립트 템플릿 리터럴 html 코드 만들기 (0) | 2021.11.23 |
| 자바스크립트 템플릿 리터럴 치환자 javascript template literal (0) | 2021.11.22 |
| 자바스크립트 백틱 문자열을 자유자재로 입력 javascript backtic (0) | 2021.11.21 |
| javascript endsWith method 자바스크립트 문자열 뒤에서 찾기 메서드 (0) | 2021.11.21 |
댓글