[자바스크립트] 템플릿 리터럴

템플릿 리터럴은 ES6에서 도입된 새로운 문자열 표현 방식으로, 기존의 따옴표('' 또는 "") 대신 백틱(``)을 사용하여 문자열을 감싸는 방식입니다. 템플릿 리터럴은 단순한 문자열뿐만 아니라, 변수나 표현식을 직접 문자열 안에 삽입하여 더욱 유연하고 가독성 높은 문자열을 만들 수 있도록 해줍니다.

템플릿 리터럴의 특징

• 백틱 사용: 템플릿 리터럴은 백틱(``)으로 감싸집니다.
• 여러 줄 문자열: 줄 바꿈을 포함한 여러 줄의 문자열을 간편하게 작성할 수 있습니다.
• 표현식 삽입: ${expression} 형태로 변수나 표현식을 문자열 안에 직접 삽입할 수 있습니다.
• 태그 함수: 템플릿 리터럴 앞에 함수를 붙여 문자열 처리를 커스터마이징할 수 있습니다.

템플릿 리터럴 사용 예시

let name = '홍길동';
let age = 30;

// 기존 방식
let greeting = '안녕하세요, ' + name + '입니다. 저는 ' + age + '살입니다.';

// 템플릿 리터럴 방식
let greeting2 = `안녕하세요, ${name}입니다. 저는 ${age}살입니다.`;

console.log(greeting);  // 안녕하세요, 홍길동입니다. 저는 30살입니다.
console.log(greeting2); // 안녕하세요, 홍길동입니다. 저는 30살입니다.

다양한 활용 예시

• HTML 템플릿 생성:

  const user = { name: 'Alice', age: 25 };
  const html = `
      <div>
          <h2>${user.name}</h2>
          <p>나이: ${user.age}</p>
      </div>
  `;
  

• 멀티라인 문자열:

  const multilineString = `
  여러 줄의
  문자열을
  쉽게 작성할 수 있습니다.
  `;
  

• 태그 함수:

  function highlight(strings, ...values) {
      let str = '';
      strings.forEach((string, i) => {
          str += string + (values[i] || '');
      });
      return str.replace(/\w+/g, (match) => `<b>${match}</b>`);
  }
  
  const message = highlight`안녕하세요 ${name}님!`;
  console.log(message); // <b>안녕하세요</b> <b>홍길동</b><b>님</b>!
  

템플릿 리터럴의 장점

• 가독성 향상: 복잡한 문자열을 더 깔끔하게 표현할 수 있습니다.
• 생산성 향상: 문자열 조합 작업을 간소화하여 개발 속도를 높일 수 있습니다.
• 유연성: 다양한 표현식을 삽입하여 동적인 문자열 생성이 가능합니다.

주의할 점

• 백틱 사용: 따옴표 대신 백틱을 사용해야 합니다.
• 표현식 삽입: ${expression} 형식으로 정확하게 삽입해야 합니다.
• 이스케이프 시퀀스: 백틱 자체를 문자열 안에 포함하려면 역슬래시(\)로 이스케이프해야 합니다.