자바스크립트 템플릿 리터럴은 ES6(ES2015)에서 도입된 새로운 문자열 표기법입니다. 이 문법을 사용하면 문자열을 더욱 편리하게 생성하고 조작할 수 있습니다. 특히, 변수 삽입, 표현식 평가, 여러 줄 문자열 등의 기능을 제공하여 개발자들에게 많은 편의성을 제공합니다.

기본적인 사용법

템플릿 리터럴은 백틱(backtick) 기호()로 문자열을 감싸는 방식으로 사용됩니다. 백틱은 일반적으로 키보드의 숫자 1` 왼쪽에 위치한 기호로 입력할 수 있습니다.

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

const message = `My name is ${name} and I'm ${age} years old.`;
console.log(message);

위 예제에서는 변수 name과 age의 값이 문자열 안에서 ${}로 감싸진 형태로 삽입되었습니다. 이렇게 템플릿 리터럴을 사용하면 문자열 안에서 변수를 쉽게 사용할 수 있습니다.

여러 줄 문자열

템플릿 리터럴은 여러 줄의 문자열을 표현하기에도 매우 편리합니다. 기존의 문자열은 줄바꿈을 위해서 \n을 사용해야 했지만, 템플릿 리터럴은 이런 번거로움 없이 여러 줄의 문자열을 그대로 작성할 수 있습니다.

const multipleLines = `
    This is the first line.
    This is the second line.
    This is the third line.
`;
console.log(multipleLines);

위 예제에서는 템플릿 리터럴을 사용하여 여러 줄의 문자열을 작성하였습니다. 이로 인해 가독성이 좋아지고 줄바꿈 처리도 간편해졌습니다.

표현식 삽입

템플릿 리터럴 내부에서는 변수 뿐만 아니라 표현식도 삽입할 수 있습니다. 표현식은 ${} 안에 작성되며, 해당 표현식은 평가된 결과로 문자열에 삽입됩니다.

const num1 = 10;
const num2 = 5;

const result = `The sum of ${num1} and ${num2} is ${num1 + num2}.`;
console.log(result);

위 예제에서는 변수 num1, num2의 값 뿐만 아니라 num1 + num2의 결과도 템플릿 리터럴에 삽입되었습니다. 따라서 결과적으로 문자열로 변환되어 출력됩니다.

Escaping Characters

템플릿 리터럴 안에서 백틱 자체를 사용하기 위해서는 이스케이프(escaping) 처리를 해야합니다. 백틱을 템플릿 리터럴 안에서 사용하고자 할 때에는 백틱 앞에 역슬래시(\)를 추가하여 이스케이프 처리해야 합니다.

const escapedString = `\`This\` is an escaped backtick.`;
console.log(escapedString);

위 예제에서는 백틱을 이스케이프 처리하여 템플릿 리터럴 안에서도 백틱을 사용할 수 있게 되었습니다.

결론

자바스크립트 템플릿 리터럴은 문자열 생성과 조작을 더욱 편리하게 해주는 기능입니다. 변수 삽입, 표현식 평가, 여러 줄 문자열 등의 기능을 제공하여 개발자들에게 많은 편의성을 제공합니다. 특히, HTML 템플릿을 생성하거나 서버 응답 메시지를 구성하는 등의 작업에 매우 유용하게 사용될 수 있습니다.

자세한 내용은 MDN 문서를 참고하시기 바랍니다.