긴 문자열 중간 생략을 위한 JavaScript 함수

사용자 인터페이스에서 긴 문자열(파일 경로, 이메일 주소, 토큰 등)을 표시할 때 중간을 생략하고 앞과 뒤만 보여주는 방식은 매우 일반적입니다. 이 글에서는 그러한 처리를 간단하게 구현할 수 있는 함수 truncateMiddleText의 코드와 활용 방식을 소개합니다.

---

✨ 함수 코드 원문

function truncateMiddleText(text, maxLength, frontLength, backLength) {
    if (text.length <= maxLength) return text;

    const start = text.slice(0, frontLength);
    const end = text.slice(-backLength);

    return `${start}...${end}`;
}

---

✨ 매개변수 설명

• text: 대상 문자열
• maxLength: 문자열 최대 허용 길이
• frontLength: 앞부분에 보여줄 문자 수
• backLength: 뒷부분에 보여줄 문자 수

---

✨ 동작 방식

1. text의 길이가 maxLength 이하인 경우 원문을 그대로 반환합니다.
2. 그 외의 경우:
   • 앞에서 frontLength만큼 자르고,
   • 뒤에서 backLength만큼 자릅니다.
   • 중간을 ...으로 대체하여 새 문자열을 반환합니다.

---

✨ 사용 예시

truncateMiddleText('verylongfilename_example.txt', 20, 10, 7); // 결과: 'verylongfi...e.txt'
truncateMiddleText('abcdefghijklmnop', 12, 4, 4); // 결과: 'abcd...mnop'

---

✨ 활용 팁

• 긴 URL, 파일 경로, 인증 토큰 등을 UI에 깔끔하게 표시할 때 유용합니다.
• maxLength는 화면 디자인에 따라 동적으로 설정할 수 있습니다.
• ... 대신 ⋯, …, *** 등 다른 구분자를 사용할 수도 있습니다.

---

✨ 결론

truncateMiddleText 함수는 문자열의 가독성을 해치지 않으면서도, 필요한 부분만 표시할 수 있는 간단하고 실용적인 문자열 처리 함수입니다. 특히 프론트엔드 UI에서 폭 넓게 활용될 수 있는 유틸리티입니다.