[JavaScript] 템플릿 리터럴 활용법

자바스크립트에서 여러줄로 이루어진 문자열을 처리해야 할 때가 있습니다.

이때 백틱( ` )을 활용하면, 가독성이 좋게 개선할 수 있습니다.

 

 

기존

console.log("string text line 1\n"+
"string text line 2");
// "string text line 1
// string text line 2"

개선

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

 

 

또한 문자열 안에 표현식을 삽입하고 싶은 경우 ${} 문법을 활용할 수 있습니다.

 

 

기존

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");
// "Fifteen is 15 and
// not 20."

개선

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

 

 

참조 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals