JavaScript 새로운 문자열 표기법 template literals (ES6)

이번에는 template literals 에 대해 알아보겠다.

기존 문자열 표기법은 이중 따옴표(") 또는 작은 따옴표(')를 이용하였다. 하지만 ES6 부터는 templete literals 라는 새로운 문자열 표기법이 도입되었다. templete literals 는 백틱(`) 이라는 문자를 사용하여 표기한다.

// ES5

var text = 'string text';

// ES6

const text = `string text`;

// ES5

console.log('string text line 1\n' +

'string text line 2');

// "string text line 1

// string text line 2"

// ES6

console.log(`string text line 1

string text line 2`);

// "string text line 1

// string text line 2"

마지막 예제를 살펴보자. ES5 에서는 문자열에 줄 바꿈이 허용되지 않으며 줄 바꿈을 하려면 (\n)을 사용하여야 한다. 하지만 ES6 template literals를 사용하면 template literals 내에 모든 줄 바꿈은 (\n)을 사용하지 않아도 그대로 적용된다.

또한 template literals 는 표현식 삽입법을 제공한다. 

// ES5

var mainFood = 'Hamburger';

var subFood = 'Cheese stick';

console.log(subFood + ' is not main food. ' + mainFood + ' is main food.');

// 'Cheese stick is not main food. Hamburger is main food.'

// ES6

var mainFood = 'Hamburger';

var subFood = 'Cheese stick';

console.log(`${subFood} is not main food. ${mainFood} is main food.`);

// 'Cheese stick is not main food. Hamburger is main food.'

'${ }' 으로 표현식을 감싸서 사용하며 이를 String Interpolation이라고 한다.

여기까지 template literals에 대하여 알아보았다.

조금 더 문자열을 간편하게 표기할 수 있는 templete literals 를 사용하자 !

읽어주셔서 감사합니다.

오늘도 해피 코딩하세요 !