템플릿 리터럴
자바스크립트의 템플릿 리터럴은 ES6에서 소개된 문자열 표기법이다. 템플릿 리터럴을 사용하면 + 연산자를 사용해서 문자열을 하나하나 연결할 필요가 없다.
- 템플릿 리터럴은 작은 따옴표나 큰 따옴표를 사용하지 않고 백틱(`)을 사용한다.
- 표현식을 ${} 내부에 삽입한다.
let studentCount = 17;
console.log("이번 기수 수강생은 현재 " + studentCount + "명입니다.");
console.log(`이번 기수 수강생은 현재 ${studentCount}명입니다.`);
// 이번 기수 수강생은 현재 17명입니다.- 큰 따옴표와
+연산자를 사용해서 문자열을 연결하는 방식보다 템플릿 리터럴 방식의 가독성이 더 좋다. - 필요에 따라 두 방식 중 하나를 선택하면 된다.
템플릿 리터럴을 사용하면 가입환영 템플릿을 쉽게 생성할 수 있다.
const getWelcomeTemplate = function (name, age, school, date) {
const welcomeTemplate = `
<html>
<body>
<h1>${name}님 가입을 환영합니다!!!</h1>
<hr>
<div>이름: ${name}</div>
<div>나이: ${age}</div>
<div>학교: ${school}</div>
<div>가입일: ${date}</div>
</body>
</html>
`;
return welcomeTemplate;
};- 템플릿 리터럴을 사용하면 여러줄로 구성된 문자열을 쉽게 만들 수 있다.
- ${} 내부에 매개변수를 넣어서 매개변수가 전달받은 값을 할당할 수 있다.
캐비지 개발 블로그입니다. :)