[ Javascript ] 템플릿 리터럴

 

 

 

🌱 자바스크립트 템플릿 리터럴(Template Literals)은 ES6(ECMAScript 2015)부터 도입된 문자열 표기법으로, 기존 문자열 방식에 비해 훨씬 편리하고 강력한 기능을 제공합니다.

템플릿 리터럴의 특징

1. 백틱(`) 사용: 작은따옴표('')나 큰따옴표("'") 대신 백틱(`)을 사용하여 문자열을 감쌉니다.
2. 문자열 삽입: ${표현식} 형태를 사용하여 문자열 안에 변수나 표현식을 직접 삽입할 수 있습니다.
3. 여러 줄 문자열: 줄바꿈 문자(\n) 없이 여러 줄에 걸쳐 문자열을 작성할 수 있습니다.
4. 태그드 템플릿 리터럴: 함수와 함께 사용하여 문자열을 더욱 세밀하게 제어할 수 있습니다.

 

템플릿 리터럴의 장점

1. 가독성 향상: 문자열과 변수를 연결할 때 + 연산자를 사용하는 대신 ${}를 사용하여 코드를 더욱 직관적으로 만들 수 있습니다.
2. 편리한 문자열 처리: 여러 줄 문자열이나 복잡한 문자열 조합을 간편하게 처리할 수 있습니다.
3. 코드 유지보수성 향상: 문자열과 변수를 분리하여 코드를 더욱 명확하게 관리할 수 있습니다.

 

템플릿 리터럴 예제

// 1. 문자열 삽입
const name = "홍길동";
const age = 30;
const message = `이름: ${name}, 나이: ${age}`;
console.log(message); // 출력: 이름: 홍길동, 나이: 30

// 2. 여러 줄 문자열
const multiline = `
  <ul>
    <li>이름: ${name}</li>
    <li>나이: ${age}</li>
  </ul>
`;
console.log(multiline);
/* 출력:
  <ul>
    <li>이름: 홍길동</li>
    <li>나이: 30</li>
  </ul>
*/

// 3. 표현식 삽입
const x = 10;
const y = 20;
const result = `결과: ${x + y}`;
console.log(result); // 출력: 결과: 30

// 4. 태그드 템플릿 리터럴
function tag(strings, name, age) {
  console.log(strings); // ["이름: ", ", 나이: ", ""]
  console.log(name); // "홍길동"
  console.log(age); // 30
  return "태그드 템플릿 리터럴";
}
const tagged = tag`이름: ${name}, 나이: ${age}`;
console.log(tagged); // 출력: 태그드 템플릿 리터럴

// 5. 태그드 템플릿 리터럴 2
function highlight(strings, ...values) {
  let result = '';
  for (let i = 0; i < strings.length; i++) {
    result += strings[i];
    if (i < values.length) {
      result += `<span class="highlight">${values[i]}</span>`;
    }
  }
  return result;
}

const name = '홍길동';
const age = 30;
const highlighted = highlight`이름: ${name}, 나이: ${age}`;
console.log(highlighted);
//출력 : 이름 : <span class = "highlight">홍길동</span>, 나이 : <span class = "highlight">30</span>

 

템플릿 리터럴 활용 예시

• HTML 템플릿 생성
• SQL 쿼리 생성
• API 요청 URL 생성
• 복잡한 문자열 조합

 

템플릿 리터럴은 자바스크립트에서 문자열을 더욱 편리하게 다룰 수 있게 해주는 강력한 기능입니다.