[ JS ] ES6. Template literals

rxxdo·2022년 3월 26일
0
post-thumbnail

오늘은 치킨^.^

왜?

리펙토링을 진행하던 도중 템플릿 리터럴을 능숙하게 사용하지 못하는 것 같아 다시 한번 다잡고 가기 위해 정리해본다.

먼저,

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다.
' 또는 " 같은 따옴표 문자 대신 백틱(backtick) 문자 ` 를 사용한다.

const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`;

console.log(template);

일반적인 문자열은 ( '' , "" ) 줄바꿈이 허용되지 않으며 공백를 표현하기 위해서는 백슬래시()로 시작하는 이스케이프 시퀀스(Escape Sequence)를 사용하여야 한다. ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 공백이 있는 그대로 적용된다.

const template = `<ul class="nav-items">
  <li><a href="#hi">hi</a></li>
  <li><a href="#hello">hello</a></li>
  <li><a href="#eungae">응애</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

console.log(template);

템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다.

const first = 'dohyun';
const last = 'Ro';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// "My name is dohyun Ro."

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`);
// "My name is dohyun Ro."

문자열 인터폴레이션은 ${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.

console.log(`1 + 1 = ${1 + 1}`); // "1 + 1 = 2"

마지막으로 ,,

< 개똥이는 오늘도 성장한다! >

참고자료
MDN 문서

profile
FE Dev.

0개의 댓글