[JS] 자바스크립트 템플릿 리터럴 - 백틱(`)과 달러(${ }) 사용법

 

 

Template literals

• 자바스크립트 Template literals는 ES6에서 도입된 새로운 문자열 표기법입니다.
• Template literals는 백틱(``)으로 시작하고 끝나는 문자열 리터럴입니다.
• 큰따옴표("")나 작은따옴표('')로 감싸는 기존 문자열 표기법과는 달리, 백틱으로 감싸면 문자열 내에서 줄바꿈(줄바꿈을 위해 \n을 사용할 필요가 없음)이나 특수문자를 그대로 표현할 수 있습니다. 
• 백틱 내에서 변수나 표현식을 삽입할 수 있습니다.

 

문자열삽입

ES6 이전:

const name = "John Doe";
const age = 30;

console.log("Hello, " + name + "I am " + age + " years old.");

템플릿 리터럴을 사용하면 아래와 같이 더 쉽게 작성할 수 있습니다.

 

const name = "John Doe";
const age = 30;

// 줄바꿈
console.log(`Hello, ${name}! I am ${age} years old.`);

출력결과 :

Hello, John Doe!
I am 30 years old.

 

표현식삽입

ES6 이전:

const name = "John Doe";
const age = 30;

// 변수 삽입
console.log("My name is " + name + ".");

// 표현식 삽입
console.log("I am " + (age + 10) + " years old.");

템플릿 리터럴을 사용하면 아래와 같이 더 쉽게 작성할 수 있습니다.

const name = "John Doe";
const age = 30;

// 변수 삽입
console.log(`My name is ${name}.`);

// 표현식 삽입
console.log(`I am ${age + 10} years old.`);

출력결과 :

My name is John Doe.
I am 40 years old.

 

띄어쓰기

ES6 이전:

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

템플릿 리터럴을 사용하면 아래와 같이 더 쉽게 작성할 수 있습니다.

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

출력결과 :

string text line 1
string text line 2