JavaScript - 템플릿 리터럴(Template Literals) 소개

Javascriptexamples

자바스크립트의 템플릿 리터럴(템플릿 스트링)으로 문자열을 만드는 방법을 소개합니다.

템플릿 리터럴은 아래 코드에서 2) with template literals처럼 Backtick(`) 안의 템플릿에 변수를 주입시켜서 문자열을 만드는 방식입니다.

const name = 'John';
const age = 25;

// 1) without template literals
let str = 'name: ' + name + ', age: ' + age;
console.log(str);

// 2) with template literals
str = `name: ${name}, age: ${age}`;
console.log(str);

Quotes('')를 사용하여 문자열을 만드는 것보다 템플릿 리터럴을 사용하여 문자열을 만드는 것이 가독성 등의 측면에서 더 나을 수 있습니다. 상황에 따라서 좋은 방법을 선택하셔서 문자열을 만드시면 됩니다.

1. 템플릿 리터럴의 기본 사용법

템플릿 리터럴은 다음과 같이 Backtick(`)이라는 문자 사이에 문자열 템플릿을 입력하고, 거기에 ${variable}처럼 변수를 주입시켜 문자열을 만듭니다.

const name = 'John';
const age = 25;

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

Output:

name: John, age: 25

템플릿 리터럴이 도입되기 전에는 아래와 같이 Quotes('')와 +로 문자열을 만들었습니다. 짧은 문자열이라면 차이가 없지만, 문자열이 길고 합성되는 변수들이 많다면, 템플릿 리터럴의 가독성이 좋을 수 있습니다.

const str = 'name: ' + name + ', age: ' + age;
console.log(str);

2. 여러줄로 작성하기

가독성 측면에서 템플릿 리터럴이 좋은 점은 여러줄로 문자열을 작성하기가 편하다는 것도 있습니다.

템플릿 리터럴에서 Backtick 안에서 개행을 하면 문자열에 개행 문자가(\n)가 추가됩니다.

const name = 'John';
const age = 25;

let str = `name: ${name}
age: ${age}`;
console.log(str);

Output:

name: John
age: 25

아래와 같이 직접 개행문자를 추가해도 됩니다. 또한 Backtick 안에서 입력한 스페이스도 모두 문자열로 적용됩니다.

const name = 'John';
const age = 25;

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

str = `name: ${name}
       age: ${age}`;
console.log(str);

Output:

name: John
age: 25
name: John
       age: 25

3. 표현식 사용하기

템플릿 리터럴에서 ${2 + 2}처럼 표현식을 사용하면, 표현식의 결과가 템플릿에 적용이 됩니다. 또한, ${function()}처럼 함수를 호출하여 그 결과를 문자열에 주입할 수도 있습니다.

function getCity() {
  return 'Seoul'
}

const name = 'John';
const age = 25;

const str = `name: ${name + ' Smith'}, age: ${age + 10}, city: ${getCity()}`;
console.log(str);

Output:

name: John Smith, age: 35, city: Seoul

아래와 같이 표현식으로 3항 연산자도 사용할 수 있습니다.

const name = 'John';
const age = 25;

const str = `name: ${name + ' Smith'}, age: ${age >= 25 ? 'Over 25' : 'Under 25'}`;
console.log(str);

Output:

name: John Smith, age: Over 25

4. 중첩 템플릿 리터럴

아래와 같이 템플릿 리터럴 안에 템플릿 리터럴을 중첩하여 사용할 수도 있습니다.

const name = 'John';
const age = 25;

const AVERAGE = 20

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

Output:

name: John Smith, age: Over 20

References

Loading script...

Related Posts

codechachaCopyright ©2019 codechacha