JavaScript의 템플릿 문자열(Template Literals)

JavaScript에서의 템플릿 문자열(Template Literals)

소개

JavaScript의 템플릿 문자열(Template Literals)은 ES6에서 도입된 새로운 문자열 표현 방식입니다. 백틱(`)을 사용하여 작성되며, 문자열 내에 변수나 표현식을 포함하거나 여러 줄로 작성할 수 있는 유용한 기능을 제공합니다.

템플릿 문자열의 특징

1. 변수 삽입 (Interpolation)

   • 템플릿 문자열은 ${}를 사용하여 문자열 내에 변수나 표현식을 삽입할 수 있습니다.

   let name = 'Alice';
   let age = 25;
   let message = `Hello, my name is ${name} and I am ${age} years old.`;
   console.log(message); // Hello, my name is Alice and I am 25 years old.

2. 여러 줄 문자열 (Multiline Strings)

   • 템플릿 문자열은 여러 줄의 텍스트를 포함할 수 있습니다.

   let multiline = `This is
   a multiline
   string.`;
   console.log(multiline);
   // This is
   // a multiline
   // string.

3. 표현식 계산 (Expression Evaluation)

   • 템플릿 문자열 내에서는 표현식을 직접 계산할 수 있습니다.

   let a = 5;
   let b = 10;
   console.log(`The sum of ${a} and ${b} is ${a + b}.`);
   // The sum of 5 and 10 is 15.

4. 태그된 템플릿 (Tagged Templates)

   • 태그 함수와 함께 템플릿 문자열을 사용하여 고급 문자열 처리를 할 수 있습니다.

   function highlight(strings, ...values) {
       return strings.map((str, i) => `${str}<strong>${values[i] || ''}</strong>`).join('');
   }
   let name = 'Alice';
   let age = 25;
   let result = highlight`Name: ${name}, Age: ${age}`;
   console.log(result); // Name: <strong>Alice</strong>, Age: <strong>25</strong>

결론

템플릿 문자열은 가독성 있는 문자열을 작성하는 데 매우 유용하며, 문자열 내에 변수나 표현식을 삽입할 수 있는 강력한 기능을 제공합니다. 이를 통해 문자열을 더욱 편리하게 처리할 수 있습니다.