es6: Template Literals(템플릿 리터럴)

백틱(`)자판이 켜진 키보드 with chatGPT

 

템플릿 리터럴 (Template Literals)은 ES6에서 도입된 문자열 표기법으로, 기존 문자열 표기 방식에 비해 여러 가지 장점을 제공합니다. 백틱( ` )을 사용하여 문자열을 작성하며, 문자열 내에서 변수와 표현식을 쉽게 삽입할 수 있고, 여러 줄 문자열도 쉽게 표현할 수 있습니다.

 

1. 기본 문법

템플릿 리터럴은 백틱( ` )으로 문자열을 감싸고, ${expression}을 사용해 표현식을 삽입할 수 있습니다.

const name = "Alice";
const greeting = `Hello, ${name}!`;
console.log(greeting); // "Hello, Alice!"

 

2. 표현식 삽입

${} 내부에 변수를 넣을 수 있을 뿐 아니라, 다양한 표현식도 사용할 수 있습니다.

 

const a = 10;
const b = 20;
console.log(`The sum of a and b is ${a + b}`); // "The sum of a and b is 30"

 

3. 여러 줄 문자열

템플릿 리터럴은 백틱을 이용해 여러 줄에 걸쳐 작성할 수 있습니다. 기존 문자열에 비해 \n 같은 개행 문자를 사용하지 않아도 되므로 가독성이 높아집니다.

const message = `This is a template literal.
It spans multiple lines.`;
console.log(message);

 

출력:

This is a template literal.
It spans multiple lines.

 

4.  함수 호출 및 복잡한 표현식 사용

템플릿 리터럴 안에서는 함수를 호출하거나 복잡한 표현식도 자유롭게 사용할 수 있습니다.

function upperCase(str) {
    return str.toUpperCase();
}

const name = "bob";
const message = `Hello, ${upperCase(name)}!`;
console.log(message); // "Hello, BOB!"

 

5.Tagged 템플릿 리터럴

Tagged 템플릿 리터럴을 사용하면 템플릿 리터럴을 처리하는 함수(tag)를 지정하여 문자열을 좀 더 복잡하게 가공할 수 있습니다. 함수명 뒤에 백틱(`)으로 템플릿을 붙여 사용합니다.

function tag(strings, ...values) {
    console.log(strings);  // ["Hello, ", "! How are you?"]
    console.log(values);   // ["Alice"]
    return `${strings[0]}${values[0]}${strings[1]}`;
}

const name = "Alice";
const result = tag`Hello, ${name}! How are you?`;
console.log(result); // "Hello, Alice! How are you?"

 

요약

템플릿 리터럴은 다음과 같은 장점이 있습니다.

• 문자열 내 변수와 표현식을 쉽게 삽입 가능
• 여러 줄 문자열을 간단하게 작성
• Tagged 템플릿 리터럴로 문자열을 가공할 수 있음

템플릿 리터럴을 사용하면 문자열을 작성하는 코드가 간결해지고 가독성이 높아집니다.