자바스크립트 실무 유틸 함수 시리즈 4 - 문자열 조작

이번 4편에서는 문자열을 다룰 때 유용한 고급 유틸 함수들을 정리합니다. 문자열은 거의 모든 웹 애플리케이션의 입력, 출력, 데이터 처리에 관여하기 때문에 깔끔하고 효율적인 문자열 조작 함수가 필수적입니다.

---

✅ 1. truncate (문자열 자르기)

📌 길이에 맞춰 문자열 자르기

function truncate(str, maxLength) {
  return str.length > maxLength ? str.slice(0, maxLength) + '...' : str;
}

📌 활용 예시

• 게시글 요약 표시
• 긴 제목 줄이기

---

✅ 2. camelCase (카멜 케이스 변환)

📌 문자열을 camelCase로 변환

function camelCase(str) {
  return str.replace(/[-_\s]+(.)?/g, (_, c) => c ? c.toUpperCase() : '').replace(/^([A-Z])/, (m) => m.toLowerCase());
}

📌 활용 예시

• API 응답 필드명 변환
• 변수명 포맷 통일

---

✅ 3. kebabCase (케밥 케이스 변환)

📌 문자열을 kebab-case로 변환

function kebabCase(str) {
  return str
    .replace(/([a-z])([A-Z])/g, '$1-$2')
    .replace(/\s+/g, '-')
    .toLowerCase();
}

📌 활용 예시

• URL 슬러그 생성
• CSS 클래스 이름 변환

---

✅ 4. padZero (숫자 앞에 0 채우기)

📌 자릿수 맞춰 0 추가

function padZero(num, length = 2) {
  return num.toString().padStart(length, '0');
}

📌 활용 예시

• 날짜, 시간 포맷팅 (예: 04월, 09시)
• 주문번호, 코드 생성

---

✅ 5. escapeHTML (HTML 특수 문자 이스케이프)

📌 HTML 태그를 문자열로 변환

function escapeHTML(str) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return str.replace(/[&<>"']/g, m => map[m]);
}

📌 활용 예시

• 사용자 입력 보호(XSS 방지)
• 댓글 출력 처리

---

✅ 결론

문자열 조작은 웹 서비스의 품질을 좌우하는 중요한 요소입니다. 이번 시리즈에서 소개한 함수들을 적극적으로 활용하면, 가독성이 높고 유지보수하기 쉬운 코드를 작성할 수 있습니다.