JavaScript 문자열 자르기 - substring, slice, substr 차이 정리

원본 작성일: 2014.04.08
보완 작성일: 2026.02.14

JavaScript에서 문자열을 자르는 방법은 여러 가지다. substring, slice, substr 세 가지가 있는데, 미묘하게 다르다.

문자열 자르기 메서드 비교

substring(start, end)

'Hello World'.substring(0, 5);   // "Hello"
'Hello World'.substring(6);      // "World"

• start부터 end 직전까지 추출
• 음수를 넣으면 0으로 처리
• start > end면 자동으로 순서 바꿔줌

slice(start, end)

'Hello World'.slice(0, 5);    // "Hello"
'Hello World'.slice(-5);      // "World" (뒤에서 5글자)
'Hello World'.slice(6, -1);   // "Worl"

• substring과 비슷하지만 음수 인덱스 지원
• 배열의 slice와 동일한 개념

substr(start, length) - 비권장

'Hello World'.substr(6, 5);   // "World"

• 두 번째 인자가 길이 (end가 아님)
• MDN에서 deprecated 표시. 사용하지 않는 게 좋다.

비교 요약

메서드	두 번째 인자	음수 지원	상태
substring(start, end)	끝 위치	X (0 처리)	표준
slice(start, end)	끝 위치	O	표준 (추천)
substr(start, length)	길이	O	비권장

결론: slice를 쓰면 된다. 음수 인덱스도 되고 가장 유연하다.

실무 예제: 말줄임 처리

원본 글에 있던 문자열 자르기 유틸 함수를 현대 문법으로 다시 쓰면:

원본 코드 (2014)

strCutter: function(str, len, suffix) {
    str = string.strNvl(str);
    len = string.strNvl(len) == "" ? 10 : len;
    if (str.length > len) {
        return str.substring(0, len) + suffix;
    } else {
        return str.substring(0, len);
    }
}

현대 문법

function truncate(str, maxLength = 10, suffix = '...') {
    if (!str) return '';
    if (str.length <= maxLength) return str;
    return str.slice(0, maxLength) + suffix;
}

truncate('이것은 긴 문자열입니다', 5);        // "이것은 긴..."
truncate('짧은 글', 10);                     // "짧은 글"
truncate('커스텀 접미사', 5, ' (더보기)');     // "커스텀 접미 (더보기)"

CSS로 말줄임 처리

JavaScript로 자르지 않고 CSS로 처리하는 방법도 있다. 화면 표시 용도라면 CSS가 더 깔끔하다.

/* 한 줄 말줄임 */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 여러 줄 말줄임 (2줄) */
.ellipsis-multi {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}