[Javascript] 템플릿 리터럴(template literal)

EJ__OH·2021년 11월 25일

템플릿 리터럴, 혹은 템플릿 스트링(template string)은 [ES6]에서 소개된 문법.
이름처럼 템플릿의 형태로 변수 값이나, 내장된 표현식의 결과에 따라 문자열이 바뀜.

문법은
문자열을 작은 따옴표('') 혹은 큰 따옴표("")로 감싸는 것이 아니라 백틱을 사용.
${expression} 형태로 변수, 표현식을 넣음.

코드로 예시를 들어보면,

const name = "EJ";
const welcome = `안녕하세요 ! ${name} 님 반갑습니다.`
console.log(welcome); // 안녕하세요 ! EJ 님 반갑습니다.

위와 같이 변수에 담긴 값을 그대로 끌어와 쓸 수 있기도 하고, 표현식을 쓸 수 있다는 점을 활용하면 또 다음과 같이도 쓸 수 있지.

(직접 썼던 코드를 예시로 들어보자.)

<img src={!isLiked ? '/images/eojineOh/heart.png' : '/images/eojineOh/redheart.png'} />

위와 같은 코드를 삼항 연산자를 활용하여,

<img src={`/images/eojineOh/${!isLiked ? 'heart.png' : 'redheart.png'}`} />

위와 같이 간결한 코드로 refactor할 수 있지.

Junior FE Developer