JavaScript 템플릿 리터럴(백틱``, 달러${})

템플릿 리터럴은 자바스크립트에서 문자열을 입력하는 방식이다.

아래와 같이 ""따옴를 사용하여 문자열을 표기했다면

const str = "따옴표로 정의한 문자열";

템플릿 리터럴은 ``백틱(backtick)을 사용한다.

const strBack = `백틱으로 정의한 문자열`;

 

 

백틱은 아래와 같은 특징이 있다.

 

1. 이스케이프 시퀀스(\n, \t 등) 없이 공백을 작성할 수 있다.

// 따옴표ver
console.log("오늘은 3월 9일\n최고기온은 22도이다.");

// 오늘은 3월 9일
// 최고기온은 22도이다.

// 백틱ver 
console.log(`오늘은 3월 9일
최고기온은 22도이다.`);

// 오늘은 3월 9일
// 최고기온은 22도이다.

2.  + 또는 , 연산자를 사용하지 않아도 문자열을 삽입할 수 있다. (문자열 인터폴레이션 ${})

// 따옴표ver
const month = 3;
const day = 9;

console.log("오늘은 " + month + "월 " + day + "일 입니다.") ;
// 오늘은 3월 9일 입니다.

// 백틱ver
const month = 3;
const day = 9;

console.log(`오늘은 ${month}월 ${day}일 입니다.`);
// 오늘은 3월 9일 입니다.

문자열 인터폴레이션은 문자열 보간이다. 변수 또는 상수 등의 값을 문자열 내에 나타내고 싶을 때 사용한다.

문자열 인터폴레이션은 ${...}로 표현식을 감싸야한다. {...}내의 표현식은 문자열로 강제 타입변환 된다.

 

다른사람들의 코드를 볼때마다 백틱과 달러가 나오면 무슨 의미인지 궁금했는데 역시 알고나니까 간단한 거였다!!

백틱과 달러가 나와도 기죽지 않고 문제 해결하길  :)