백틱(Backtick, ```)

백틱(Backtick, ```)은 자바스크립트에서 템플릿 리터럴(Template Literals)을 작성할 때 사용하는 기호입니다. 백틱은 기존의 문자열 작성 방식(', ")보다 다양한 기능을 제공하여 문자열을 다루는 데 매우 유용합니다.

1. 기본 사용법

백틱을 사용하면 문자열을 작성할 때 여러 줄에 걸친 문자열을 쉽게 만들 수 있으며, 표현식을 삽입할 수 있는 기능도 제공합니다.

const message = `This is a string using backticks!`;
console.log(message);  // 출력: This is a string using backticks!

2. 여러 줄 문자열

백틱을 사용하면 여러 줄에 걸친 문자열을 쉽게 작성할 수 있습니다. 기존 방식에서는 줄바꿈 문자(\n)를 사용해야 했지만, 백틱을 사용하면 그럴 필요가 없습니다.

const multiLineString = `This is a
multiline
string.`;
console.log(multiLineString);

출력:

This is a
multiline
string.

3. 문자열 내 표현식 삽입 (String Interpolation)

백틱을 사용하면 ${}를 통해 문자열 내에 변수나 표현식을 삽입할 수 있습니다. 이를 문자열 보간(String Interpolation)이라고도 부릅니다.

const name = "John";
const age = 30;
const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);  // 출력: Hello, my name is John and I am 30 years old.

여기서 ${} 안에 변수를 넣으면 그 값이 문자열 내에 동적으로 삽입됩니다.

4. 복잡한 표현식 삽입

백틱 안에서는 단순한 변수가 아닌 복잡한 자바스크립트 표현식도 삽입할 수 있습니다.

const a = 5;
const b = 10;
const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);  // 출력: The sum of 5 and 10 is 15.

5. 태그된 템플릿 리터럴 (Tagged Template Literals)

태그 함수와 함께 사용할 수도 있습니다. 태그된 템플릿 리터럴은 템플릿 리터럴의 문자열 부분과 표현식을 개별적으로 처리할 수 있게 해줍니다. 주로 보안이나 다국어 지원 같은 특정 목적에 맞춰 문자열을 조작할 때 사용됩니다.

function tag(strings, ...values) {
    console.log(strings);  // ['Hello, ', ' is ', ' years old.']
    console.log(values);   // ['John', 30]
    return `${values[0]} is ${values[1]} years old.`;
}

const name = "John";
const age = 30;
const message = tag`Hello, ${name} is ${age} years old.`;

console.log(message);  // 출력: John is 30 years old.

6. 기존 문자열 방식과 비교

기존 방식에서는 작은 따옴표(')나 큰 따옴표(")를 사용해 문자열을 작성해야 했고, 여러 줄을 표현할 때 줄바꿈 문자를 사용하거나, 문자열에 변수를 삽입하려면 문자열을 연결해야 했습니다.

const name = "John";
const greeting = "Hello, my name is " + name + " and I am 30 years old.";

백틱을 사용하면 더 가독성 좋게 작성할 수 있습니다.

결론

백틱(템플릿 리터럴)은 자바스크립트에서 문자열을 다룰 때 매우 강력한 기능을 제공합니다. 여러 줄 문자열 작성, 표현식 삽입, 태그된 템플릿 리터럴 등 기존 방식보다 더 간편하고 유연하게 문자열을 처리할 수 있어 현대 자바스크립트에서 많이 사용됩니다.