🌼 Template Literals

• 템플릿 리터럴(Template Literals)은 내장된 표현식을 허용하는 문자열 리터럴입니다.
• 템플릿 리터럴(Template Literals)은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공한다.

1️⃣ 기본 사용법

• Backtick(`)이라는 문자 사이에 문자열 템플릿을 입력하고, 거기에 ${변수명}을 입력한다.

const name = '철수';
const age = 25;

* befor
const arr = 'name: ' + name + ', age: ' + age;
console.log(arr);

* after
const arr = `name: ${name}, age: ${age}`;
console.log(arr);	

Output

name: 철수, age: 25

2️⃣ 여러줄로 작성하기

const name = '철수';
const age = 25;

* befor
let arr = `name: ${name}\n age: ${age}`;
console.log(arr);

* after
let arr = `name: ${name}
age: ${age}`;
console.log(arr);	

Output

name: 철수
age: 25

3️⃣ 표현식 사용하기

• ${2 + 2}처럼 표현식을 사용하면, 표현식의 결과가 템플릿에 적용 된다.. 또한, ${function()}함수를 호출하여 그 결과를 문자열에 주입도 가능

function phone() {
  return '010-0000-0000'
}

const name = '철수';
const age = 25;

const arr = `name: ${'김'+name}, age: ${age + 10}, phoneNumber: ${phone()}`;
console.log(arr);

Output

name: 김철수, age: 35, phoneNumber: 010-0000-0000

4️⃣ 중첩 템플릿 리터럴

• 템플릿 리터럴 안에 템플릿 리터럴을 중첩하여 사용할 수도 있다.

const name = '철수';
const age = 25;

const AVERAGE = 20

const arr = `name: ${'김'+name}, age: ${age >= AVERAGE ? `(Over : ${AVERAGE})` : `(Under : ${AVERAGE})`}`;
console.log(arr);

Output

name: 김철수 , age: (Over :  20)

참고자료