Template Literals(템플릿 리터럴)이란?
ES6부터 템플릿 리터럴 이라고 하는 새로운 문자열 표기법이 도입되었다. 템플릿 리터럴은 멀티라인 문자열,표현식 삽입,태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다. 템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.
템플릿 리터럴은 일반 문자열과 비슷해 보이지만 일반적인 따옴표 대신 백틱(`)을 사용해 표현한다.
예를 들면
function getWelcomeTemplate({name, age, school, createdAt}){ //매개변수
const mytemplate = `
<html>
<body>
<h1>${name}님 가입을 환영합니다!!!</h1>
<hr />
<div>이름: ${name}</div>
<div>나이: ${age}</div>
<div>학교: ${school}</div>
<div>가입일: ${createdAt}</div>
</body>
</html>
`
console.log(mytemplate);
}
const name = "철수"
const age = 12
const school = "공룡초등학교"
const createdAt = "2023-01-01-10"
getWelcomeTemplate({name, age , school, createdAt}) `
<html>
<body>
<h1>${name}님 가입을 환영합니다!!!</h1>
<hr />
<div>이름: ${name}</div>
<div>나이: ${age}</div>
<div>학교: ${school}</div>
<div>가입일: ${createdAt}</div>
</body>
</html>
`
const name = "철수"
const age = 12
const school = "공룡초등학교"
const createdAt = "2023-01-01-10"
getWelcomeTemplate({name, age , school, createdAt})템플릿 리터럴에서는 아래와 같이 $와 중괄호{}를 사용하여 표현식을 표기할 수 있습니다.위처럼 하드코딩을 해주는 것 대신 가동성이 더 좋고 편리하다고 할 수 있습니다.
코딩하면서 알게 된게 항상 편리하고 더 보기 좋고 유지보수가 쉽게 만들라고 배우고 있는데 알면 알수록 메서드로 유지보수를 쉽게 만들수 있는거 같습니다. 좀더 공부 열심히 해보겠습니다.
간절하고 치열하게 살자