[JavaScript] 템플릿 리터럴 알아보기

 

 

 

템플릿 리터럴(Template Literals)을 사용한 로그 출력 알아보기

---

 

 

 

 

 

JavaScript에서 콘솔에 값을 출력하는 방법은 여러 가지가 있지만, ES6(ECMAScript 2015)부터 도입된 템플릿 리터럴(Template Literals)을 사용하면 가독성 좋고 직관적인 문자열을 만들 수 있습니다. 템플릿 리터럴은 백틱()으로 감싸서 사용하며, ${}` 구문을 사용하여 변수나 표현식을 삽입할 수 있습니다.

 

 

 

 

템플릿 리터럴 사용의 장점

 

• 복잡한 문자열 조작이 쉬움
• 복잡한 표현식도 삽입 가능
• 변수 삽입에 편리함 

 

 

기본 사용법

 

템플릿 리터럴을 사용하면 여러 줄의 문자열이나 문자열 내에 변수 삽입이 쉬워집니다. 

const name = "John";
const age = 30;

console.log(`Hello, my name is ${name} and I am ${age} years old.`);

 

위 코드에서는 name과 age 변수를 템플릿 리터럴을 사용하여 문자열 내에 삽입했습니다. 

실행 결과는 아래와 같습니다. 

Hello, my name is John and I am 30 years old.

 

 

 

 

표현식 삽입

 

템플릿 리터럴은 단순히 변수뿐만 아니라 표현식도 삽입할 수 있습니다. 예를 들어 아래와 같이 삼항 연산자를 사용할 수 있습니다

const isLeft = true;

console.log(`Restarting ${isLeft ? 'left' : 'right'} stream due to streaming limit reached.`);

 

위 코드에서는 isLeft 변수가 true인지 false인지에 따라 다른 문자열을 출력합니다. isLeft가 true이면 'left'가 출력되고, false이면 'right'가 출력됩니다. 실행 결과는 아래와 같습니다. 

Restarting left stream due to streaming limit reached.

 

만약 isLeft가 false라면 실행 결과는 아래와 같습니다. 

Restarting right stream due to streaming limit reached.

 

 

 

 

복잡한 예제

 

템플릿 리터럴은 매우 유연해서 복잡한 문자열 조작에도 유용합니다. 

const user = {
  name: "Alice",
  age: 28,
  job: "Engineer"
};

console.log(`User Info:
Name: ${user.name}
Age: ${user.age}
Job: ${user.job}`);

 

위 예제는 객체 user의 속성들을 문자열 내에 삽입하여 출력합니다. 

실행 결과는 아래와 같습니다. 

User Info:
Name: Alice
Age: 28
Job: Engineer

 

 

 

 

함수 호출

템플릿 리터럴 내에서 함수 호출도 가능합니다. 예를 들어, 다음과 같이 사용할 수 있습니다:

function greet(name) {
  return `Hello, ${name}!`;
}

const userName = "Bob";
console.log(`${greet(userName)} Welcome to our site.`);

 

위 코드에서는 greet 함수를 호출하여 반환된 문자열을 템플릿 리터럴 내에 삽입합니다. 

실행 결과는 아래와 같습니다. 

Hello, Bob! Welcome to our site.