[JavaScript] ES6 문법 정리 (템플릿 리터럴, 문자열 인터폴레이션)

ES6는 템플릿 리터럴(Template literal)이라고 불리는 새로운 문자열 표기법을 도입하였다.일반적으로 문자작성시 ''(작은 따옴표) 혹은 ""(큰 따옴표)를 사용하였으나 ES6에선 `` (백틱 문자)를 사용한다.

템플릿 리터럴 (Template literal)

• 문자열내의 공백을 있는 그대로 제공한다
• 작은 따옴표와 큰따옴표를 혼용할 수 있다
• 문자열 인터폴레이션을 제공한다

const tip = `템플릿 리터럴은 '작은 따옴표'과 "큰 따옴표"를 혼용할 수 있다.`;

 

문자열 인터폴레이션(String Interpolation)

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

• ${표현식}

const name = 'hyewon';

// ES5
console.log('My name is ' + name + '.');

// ES6
console.log(`My name is ${name}.`);

//인터폴레이션 내의 표현식은 문자열로 강제 타입 변환된다.
//2+3 = 5
console.log(`2 + 3 = ${2+3}`);

ES6 코드 사용 사례 & 효과

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

const example = "<table border='1'>\n<tr>\n<td>테이블</td>\n</tr>\n</table>";

하지만 ES6 템플릿 리터럴은 일반적인 문자열과 달리 여러 줄에 걸쳐 문자열을 작성할 수 있으며 템플릿 리터럴 내의 모든 공백들은 있는 그대로 적용된다.

const example = `<table>
	<tr>
    <td>테이블</td>
    </tr>
</table>`;