ES6 템플릿 리터럴

템플릿 리터럴

#1 템플릿 리터럴 사용법, '와 "의 혼용

ES6 는 템플릿 리터럴 이라고 불리는 새로운 문자열 표기법을 도입하였다.

템플릿 리터럴은 일반 문자열과는 달리 ' 또는 " 같은 따옴표 대신 백틱 문자 ` 를 사용한다.

const tempalte = `템플릿 리터럴은 '작은따옴표'와 "큰따옴표"를 혼용할 수 있다.`;
console.log(template);

또한 ES6 템플릿 리터럴은 여러 줄에 걸쳐 작성할 수 있으며, 템플릿 리터럴 내에 있는 모든 화이트스페이스는 있는 그대로 적용된다.

const template = `<ul class="nav-items">
                  <li><a href="#home">Home</a></li>
                  <li><a href="#news">News</a></li>
                  <li><a href="#contact">Contact</a></li>
                  <li><a href="#about">About</a></li>
                  </ul>`;

console.log(template);

---

#2 문자열 삽입

템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공하는데,

이를 '문자열 삽입' 이라고 한다.

const first = 'lee';
const last = 'tommy';

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

// ES6 String Interpolation
console.log(`My name is ${first} ${last}. `); // My name is lee tommy

---

#3 템플릿 대입문

${expression}을 '템플릿 대입문' 이라고 한다.

템플릿 대입문에는 문자열 뿐만 아니라 자바스크립트 표현식도 사용할 수 있다.

// 템플릿 대입문에는 문자열뿐만 아니라 표현식도 사용 가능
console.log(`1 + 1 = ${1 + 1}`); // 1 + 1 = 2

const name = 'tommy';
console.log(`Hello ${name.toUpperCase()}`); // Hello TOMMY

---

짧아서 간단한 이야기인 것처럼 보이겠지만 백틱 문자 `를 쓰는 상황이 왔을 때 이 템플릿 리터럴을 모른다면 고생할 것이다. 물론 아닐 수도 있지만..ㅎ

이 다음에는 화살표 함수 =>에 대해서 살펴보도록 하겠습니다. 감사합니다!!