[Javascript] 역따옴표(백틱)을 이용한 템플릿 리터럴(template literal)

자바스크립트의 문자열

 

자바스크립트에서 문자열을 감싸는 따옴표로 '작은따옴표' , "큰따옴표" , `역따옴표(백틱)` 을 사용할수있다.

let A = '작은따옴표';
let B = "큰따옴표";
let C = `역따옴표`;

console.log(A);     // 작은따옴표
console.log(B);     // 큰따옴표
console.log(C);     // 역따옴표

 

이중에서 작은따옴표와 큰따옴표는 차이가 없고,

역따옴표는 Javascript ES6에서 추가된 템플릿 리터럴에 쓰인다.

---

템플릿 리터럴(template literal)

 

템플릿 리터럴은 역따옴표(`)로 감싼 문자열 중간에  ${…}로 감싼 표현식을 표현하는 기능이다.

 

우선 기존의 문자열로 표현식을 표현하는 방법을 확인해보자.

let A = 1
let B = 2

console.log("1+2="+(A+B)+"입니다.");

실행결과

기존의 문자열 내부에 표현식을 추가하려면, 문자열을 따옴표로 분리하고 + 연산자로 하나씩 연결해야하는 불편함이 있었다. 이를 표현식 삽입법 (Expression interpolation) 이라고 한다.

 

 

이러한 불편함을 손쉽게 해결할 수 있는 방법이 바로  템플릿 리터럴(template literal)이다. 아래 예시를 살펴보자.

let A = 1
let B = 2

console.log(`${A} 더하기 ${B} 는 ${A + B} 입니다.`);

실행결과

 

템플릿 리터럴을 사용한 결과, 문자열을 분리할 필요 없이 간편하면서 가독성있게 문자열 내부에 표현식을 추가할 수 있게 되었다.

 

---

 

+ 템플릿 리터럴을 사용하면 줄바꿈도 간단하게 할 수 있다.

console.log(`line 1
line 2
line 3`);

실행결과

위와같이 \n을 사용하지 않고도 줄바꿈을 나타낼 수 있다.

 

 

-참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals - JavaScript | MDN