자바스크립트 템플릿 리터럴 – 백틱

템플릿 리터럴

자바스크립트의 흔히 '백틱(`, grave accent)'이라 부르는 '템플릿 리터럴'을 활용하여 문자열 조작하는 방법을 알아봅니다. 멀티라인 문자열, 변수 및 표현식 삽입, 동적 URL 생성 등 다양한 활용법을 예제와 함께 소개합니다. 자바스크립트 템플릿 리터럴을 효과적으로 활용할 수 있도록 안내합니다.

템플릿 리터럴의 사용 방법

템플릿 리터럴(Template literals)은 ES6(ES2015)에서 도입된 자바스크립트의 새로운 문자열 표기법입니다.
문자열을 편리하게 작성하고 다룰 수 있도록 고안되었습니다. 기존의 문자열 표기 방식인 작은따옴표(')나 큰따옴표(") 대신 백틱(`)을 사용하여 문자열을 감싸는 것이 주요 특징입니다. 템플릿 리터럴은 일반 문자열과 달리 여러 줄에 걸쳐 작성할 수 있으며, 변수와 표현식을 삽입할 수 있어서 문자열 조작을 더욱 편리하게 할 수 있습니다.

탬플릿 리터럴이 제공하는 주요 기능은 다음과 같습니다.

여러 줄 문자열 (Multi-line strings)
표현식 삽입 (Expression interpolation)

여러 줄 문자열 (Multi-line strings)

템플릿 리터럴을 사용하면 여러 줄에 걸쳐 문자열을 작성할 수 있습니다. 추가적인 줄바꿈 문자나 이스케이프 문자를 사용하지 않아도 됩니다.

JavaScript - 기존 문자열 방식 기존 문자열 방식의 멀티라인 문자열 생성 예제 코드입니다.

// 기존 방식의 멀티라인 문자열 생성
const multilineString = "첫 번째 줄\n" +
  "두 번째 줄\n" +
  "세 번째 줄";
console.log(multilineString);
// 출력:
// "첫 번째 줄"
// "두 번째 줄"
// "세 번째 줄"

위의 코드에서는 백슬래시와 줄바꿈 문자(\n)를 사용하여 각 줄을 연결하였습니다. 이 방식은 문자열을 여러 줄에 걸쳐 작성하기 위해 추가적인 처리가 필요한 불편함이 있습니다.

반면에 템플릿 리터럴을 사용하여 멀티라인 문자열을 만드는 경우, 백틱(`)을 사용하여 간단하게 작성할 수 있습니다. 다음은 템플릿 리터럴로 멀티라인 문자열을 생성하는 예제 코드입니다.

JavaScript - 템플릿 리터럴 방식 템플릿 리터럴로 멀티라인 문자열을 생성하는 예제 코드입니다.

// 템플릿 리터럴을 사용한 멀티라인 문자열 생성
const multilineString = `첫 번째 줄
두 번째 줄
세 번째 줄`;
console.log(multilineString);
// 출력:
// "첫 번째 줄"
// "두 번째 줄"
// "세 번째 줄"

템플릿 리터럴을 사용하면 줄바꿈을 위해 추가적인 처리를 할 필요가 없이 간단하게 멀티라인 문자열을 작성할 수 있습니다. 여러 줄을 작성할 때의 가독성이 좋아지며, 코드 작성이 편리해집니다. 따라서, 템플릿 리터럴은 멀티라인 문자열 작성을 위한 간편한 방법을 제공하여 기존의 자바스크립트보다 더 편리하게 문자열을 다룰 수 있습니다.

표현식 삽입 (Expression interpolation)

템플릿 리터럴은 표현식을 삽입할 수 있습니다. 표현식을 삽입하려면 $ 기호를 사용하고 표현식을 중괄호로 묶습니다. 예를 들어, 다음 코드는 name변수의 값을 템플릿 리터럴에 삽입합니다.

템플릿 리터럴에 삽입할 수 있는 표현식은 다음과 같습니다.

변수
연산자
함수 호출
객체 속성
배열 요소

변수를 표현식에 삽입

JavaScript - 기존 문자열 방식 기존 문자열 방식의 변수와 문자열 결합

let name = "홍길동";
const message = "환영합니다. " + name + " 님";

console.log(message);
// 출력: "환영합니다. 홍길동 님!"

JavaScript - 템플릿 리터럴 방식 리터럴 문자열내에 변수를 ${expression} 형태로 표현식을 삽입합니다.

let name = "홍길동";
const message = `환영합니다. ${name} 님!`;

console.log(message);
// 출력: "환영합니다. 홍길동 님!"

연산자를 표현식에 삽입

JavaScript - 템플릿 리터럴 방식 리터럴 문자열내에 연산자를 ${expression} 형태로 표현식을 삽입합니다.

const x = 10;
const y = 5;
const result = `${x} + ${y} = ${x + y}`;
console.log(result);
// 출력: 10 + 5 = 15

함수 호출을 표현식에 삽입

JavaScript - 템플릿 리터럴 방식 리터럴 문자열내에 함수 호출을 ${expression} 형태로 표현식을 삽입합니다.

function greet(name) {
    return `안녕하세요, ${name} 님!`;
}
  
const userName = "John";
const message = `인사 메시지: ${greet(userName)}`;

console.log(message);
// 출력: "인사 메시지: 안녕하세요, John 님!"

객체 속성을 표현식에 삽입

JavaScript - 템플릿 리터럴 방식 리터럴 문자열내에 객체 속성을 ${expression} 형태로 표현식을 삽입합니다.

const person = {
    name: "John",
    age: 30,
    greet() {
        return `안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`;
    }
};

const greeting = person.greet();
console.log(greeting);
// 출력: "안녕하세요, 저는 John이고, 나이는 30살입니다."

배열 요소를 표현식에 삽입

JavaScript - 템플릿 리터럴 방식 리터럴 문자열내에 배열 요소를 ${expression} 형태로 표현식을 삽입합니다.

const fruits = ["사과", "바나나", "오렌지"];
const message = `내가 좋아하는 과일은 ${fruits[0]}, ${fruits[1]}, ${fruits[2]}입니다.`;
console.log(message);
// 출력: "내가 좋아하는 과일은 사과, 바나나, 오렌지입니다."

템플릿 리터럴은 표현식을 삽입할 수 있는 유용한 기능입니다. 이를 통해 JavaScript 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다.

템플릿 리터럴 실전 예제 다루기

템플릿 리터럴을 몇 가지 실전 예제를 통해 다뤄보겠습니다.

동적인 URL 생성 예제 코드
HTML 템플릿 생성 예제 코드
HTML 로그 메시지 포맷팅 예제 코드

동적인 URL 생성 예제 코드

JavaScript

const baseURL = "https://api.example.com";

// 1. 기본적인 URL 템플릿 리터럴 사용하기
const endpoint1 = `${baseURL}/users`;
console.log(endpoint1); // 출력: "https://api.example.com/users"

// 2. URL에 변수 삽입하기
const userId = 123;
const endpoint2 = `${baseURL}/users/${userId}`;
console.log(endpoint2); // 출력: "https://api.example.com/users/123"

// 3. URL 파라미터 다루기
const userId = 123;
const postId = 456;
const endpoint3 = `${baseURL}/users/${userId}/posts/${postId}`;
console.log(endpoint3); // 출력: "https://api.example.com/users/123/posts/456"

// 4. Query 문자열 생성하기
const params = {
    category: "books",
    limit: 10,
    sort: "desc"
};
const queryString = Object.entries(params)
  .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
  .join("&");
const endpoint4 = `${baseURL}/search?${queryString}`;
console.log(endpoint4); // 출력: "https://api.example.com/search?category=books&limit=10&sort=desc"

자바스크립트 encodeURIComponent() 함수

자바스크립트 join() 함수

위의 예제 코드에서는 다양한 동적인 URL 생성 방법을 다루었습니다. 기본적인 URL 템플릿 리터럴 사용부터 URL에 변수 삽입, URL 파라미터 다루기, Query 문자열 생성까지 다양한 케이스를 포함하고 있습니다.

실제로는 baseURL이나 변수 값, 파라미터, 쿼리 문자열 등은 해당 프로젝트나 API에 맞게 변경되어야 합니다. 하지만 위의 예제를 참고하여 동적인 URL 생성에 대한 개념과 방법을 이해하고 활용할 수 있을 것입니다.

HTML 템플릿 생성 예제 코드

JavaScript

// 1. 기본적인 HTML 템플릿 리터럴 사용하기
const title = "Welcome!";
const content = "Hello, world!";
const htmlTemplate1 = `
    <div class="container">
        <h1>${title}</h1>
        <p>${content}</p>
    </div>
`;

console.log(htmlTemplate1);

// 2. 동적인 데이터 삽입하기
const user = {
    name: "John",
    age: 30,
    email: "john@example.com"
};
const htmlTemplate2 = `
    <div class="user-profile">
        <h2>${user.name}</h2>
        <p>Age: ${user.age}</p>
        <p>Email: ${user.email}</p>
    </div>
`;

console.log(htmlTemplate2);

// 3. 반복문을 활용한 리스트 생성
const todos = [
    {id: 1, title: "Buy groceries"},
    {id: 2, title: "Do laundry"},
    {id: 3, title: "Clean the house"}
];
const todoList = `
    <ul>
        ${todos.map(todo => `<li>${todo.title}</li>`).join("")}
    </ul>
`;
console.log(todoList);

// 4. 조건문을 활용한 동적인 HTML 생성
const isAuthenticated = true;
const loginMessage = `
    ${isAuthenticated ? `<p>Welcome back, ${user.name}!</p>` : `<p>Please log in.</p>`}
`;

console.log(loginMessage);

위의 예제 코드에서는 다양한 방법으로 HTML 템플릿 생성을 다루었습니다. 기본적인 HTML 템플릿 리터럴 사용부터 동적인 데이터 삽입, 반복문을 활용한 리스트 생성, 조건문을 활용한 동적인 HTML 생성까지 다양한 케이스를 포함하고 있습니다.

실제로는 변수 값이나 데이터, 반복문을 적용할 대상 등은 해당 프로젝트나 상황에 맞게 변경되어야 합니다. 하지만 위의 예제를 참고하여 HTML 템플릿 생성에 대한 개념과 방법을 이해하고 활용할 수 있을 것입니다.

HTML 로그 메시지 포맷팅 예제 코드

JavaScript

// 1. 기본적인 로그 메시지 템플릿 리터럴 사용하기
const message1 = "Something happened";
console.log(`[INFO] ${message1}`);

// 2. 로그 레벨과 타임스탬프 추가하기
function formatLog(level, message) {
    const timestamp = new Date().toLocaleString();
    return `[${level}] ${timestamp} - ${message}`;
}

const message2 = "An error occurred";
console.log(formatLog("ERROR", message2));

// 3. 동적인 데이터 삽입하기
function formatLog(level, message, data) {
    const timestamp = new Date().toLocaleString();
    return `[${level}] ${timestamp} - ${message} - ${JSON.stringify(data)}`;
}

const user = {id: 123, name: "John"};
console.log(formatLog("DEBUG", "User logged in", user));

위의 예제 코드에서는 다양한 방법으로 로그 메시지 포맷팅을 다루었습니다. 기본적인 로그 메시지 템플릿 리터럴 사용부터 로그 레벨과 타임스탬프 추가, 동적인 데이터 삽입까지 다양한 케이스를 포함하고 있습니다.

실제로는 로그 메시지, 로그 레벨, 타임스탬프 등은 해당 프로젝트나 상황에 맞게 변경되어야 합니다. 예제를 참고하여 로그 메시지 포맷팅에 대한 개념과 방법을 이해하고, 로그 메시지를 원하는 형식으로 구성할 수 있을 것입니다.