[자바스크립트] JS다운 코드 스타일 #1. 템플릿 리터럴

<목차>

1. 템플릿 리터럴(Template Literal)

2. spread 연산자
2020/10/08 - [개발/자바스크립트] - [자바스크립트] JS다운 코드 스타일 #2. Spread 연산자

3. 배열, 함수형 프로그래밍
2020/10/15 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #3. 배열, 함수형 프로그래밍

4. 비구조화 할당
2020/11/20 - [개발/자바스크립트] - [자바스크립트]JS다운 코드 스타일 #4. 비구조화 할당

---

 

1. 템플릿 리터럴(Template Literal)

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.

표현식/문자열 삽입, 태깅 등 다양한 기능을 제공하며 

사용법은 작은따옴표('), 큰따옴표(") 대신에 백틱(`)를 사용합니다. 여기서 백틱은 키보드 좌상단에 있는 ESC 아래, Tab키 위에 1 왼쪽에 위치해 있습니다.

---

Syntax (사용법)

let stock = `my stock is expensive`;

let stockName = 'Amazon';

let myStock = `${stockName} is expensive`;

console.log(stock) // 'my stock is expensive'
console.log(myStock) // 'Amazon is expensive'

보시다시피 myStock 의 문자열 안에 ${}를 통해 값을 넣어주었습니다. 

---

Expression interpolation (표현식 삽입법)

let previousStock = stockName + ' is expensive';

▼

let myStock = `${stockName} is expensive`;

기존에는 +연산자를 통해 문자열을 연결해줘야 했는데 템플릿 리터럴을 쓰게 됨으로써 이러한 불편함이 많이 해소되고 직관적인 이해가 가능해졌습니다.

---

Multi Line (다중 행 표기)

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`);

여러줄의 문자열도 간단하게 표현이 가능합니다.

이전에는 개행 문자 \n를 써줘야 했지만 템플릿 리터럴 안에서는 그냥 스페이스를 통해 똑같이 작성이 가능합니다.

 

---

위에 설명한 간단한 기능 외에도 템플릿 리터럴을 사용하면 이전에 느껴보지 못했던 여러 가지 자유로움과 확장성을 느끼실 수 있습니다. 

이것으로 

JS다운 코드 스타일 시리즈 1. 템플릿 문자열에 대해 마치겠습니다.