`JavaScript` 템플릿 리터럴 (Template Literal)

 

템플릿 리터럴(Template Literal)

 

안녕하세요 오늘은 자바스크립트 ES6부터 제공된 템플릿 리터럴에 대해서 알아보겠습니다.

 

템플릿 리터럴은 자바스크립트에서 문자열을 좀 더 유연하게 다루고 싶을 때 유용하게 쓸 수 있는 문법입니다

기존의 문자열 표현 방법보다 편리하고 코드도 훨씬 깔끔하게 작성할 수 있습니다.

템플릿 리터럴은 백틱(``)으로 감싸서 사용합니다.

 

 

 

 

 

주요 기능

 

변수 삽입

 

const name = "이태규";
const greeting = `안녕, ${이태규}!`;
console.log(greeting); // "안녕, 이태규!"

 

 

문자열 안에 변수를 넣을 수 있습니다.

${} 구문을 이용해서 변수나 표현식을 그대로 문자열에 삽입합니다.

 

 

 

다중 행 문자열

 

const multiline = `이런식으로
여러 줄에 걸쳐서 
문자열을 사용할 수 있어욥`;
console.log(multiline);

 

 

 

표현식 삽입

 

const a = 5;
const b = 10;
const result = `문제1: ${a} + ${b} = ${a + b}.`;
console.log(result); // "문제1: 5 + 10 = 15"

 

 

이런 복잡한 표현식도 템플릿 리터럴을 사용하면 간단히 작성 가능합니뎅

 

 

태그된 템플릿

function tag(strings, ...values) {
  console.log(strings);  // ["안녕, ", "!"]
  console.log(values);   // ["이태규"]
  return `${strings[0]}${values[0]}${strings[1]}`;
}

const name = "이태규";
const result = tag`안녕, ${name}!`;
console.log(result);  // "안녕, 이태규!"

 

 

태그 함수는 템플릿 리터럴의 각 부분을 따로 받아서 원하는 대로 가공할 수 있습니다

 

 

마무리

 

템플릿 리터럴은 문자열을 보다 간편하게 다룰 수 있게 해주고

여러 줄에 걸친 문자열 작성, 변수와 표현식의 손쉬운 삽입,

태그된 템플릿을 활용한 커스터마이징 등

템플릿 리터럴을 쓰면 코드 작성이 편해집니다.