// 기존 방식의 멀티라인 문자열 생성
const multilineString = "첫 번째 줄\n" +
  "두 번째 줄\n" +
  "세 번째 줄";
console.log(multilineString);
// 출력:
// "첫 번째 줄"
// "두 번째 줄"
// "세 번째 줄"
// 템플릿 리터럴을 사용한 멀티라인 문자열 생성
const multilineString = `첫 번째 줄
두 번째 줄
세 번째 줄`;
console.log(multilineString);
// 출력:
// "첫 번째 줄"
// "두 번째 줄"
// "세 번째 줄"
let name = "홍길동";
const message = "환영합니다. " + name + " 님";

console.log(message);
// 출력: "환영합니다. 홍길동 님!"
let name = "홍길동";
const message = `환영합니다. ${name} 님!`;

console.log(message);
// 출력: "환영합니다. 홍길동 님!"
const x = 10;
const y = 5;
const result = `${x} + ${y} = ${x + y}`;
console.log(result);
// 출력: 10 + 5 = 15
function greet(name) {
    return `안녕하세요, ${name} 님!`;
}
  
const userName = "John";
const message = `인사 메시지: ${greet(userName)}`;

console.log(message);
// 출력: "인사 메시지: 안녕하세요, John 님!"
const person = {
    name: "John",
    age: 30,
    greet() {
        return `안녕하세요, 저는 ${this.name}이고, 나이는 ${this.age}살입니다.`;
    }
};

const greeting = person.greet();
console.log(greeting);
// 출력: "안녕하세요, 저는 John이고, 나이는 30살입니다."
const fruits = ["사과", "바나나", "오렌지"];
const message = `내가 좋아하는 과일은 ${fruits[0]}, ${fruits[1]}, ${fruits[2]}입니다.`;
console.log(message);
// 출력: "내가 좋아하는 과일은 사과, 바나나, 오렌지입니다."
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"
// 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);
// 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));

caniuse.com에서 더 자세한 정보를 확인해 보세요.