ES6] Template literals - ` back-tick 사용법

ES6의 Template Literals는 자바스크립트가 갖고 있던 문자열의 한계를 바꿔주었다. 

 

Syntax

Template Literals는 기존에 사용하던 single quotes(''), double quotes("")가 아닌 back-ticks(``) 을 사용한다. 

var greeting = `Hello World!`;

String Interpolation

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

 

var name = "Brendan";

//기존방식 
console.log('Hello, ' + name + '!');
// => "Hello, Brendan!"

//String Literals 
console.log(`Hello, ${name}!`);
// => "Hello, Brendan!"

단순히 변수명으로 대치하는 것을 넘어서, inline math도 가능하다.

var name = "Brendan";


//String Literals 
console.log(`Hello, ${name.split('').reverse().join('')}!`);
// => "Hello, nadnerB!"

var myAge = 10;
var momAge  = 30;
console.log(`I'm ${momAge-myAge} years younger than my mom`);
//=>I'm 20 years younger than my mom 

함수를 입력할 수도 있다.

function fn() { return "Hello World!"; }
console.log(`${fn()} Brandan`);
//=> Hello World! Brandan

Multiline Strings

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

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

Tagged Templates

함수 뒤에 Template Literals를 붙여서 사용할 수 있다.

fn`Hello ${you}! You're looking ${adjective} today!`

는 아래와 같이 함수를 호출하는 것과 동일하다.

fn(["Hello ", "! You're looking ", " today!"], you, adjective);