JavaScript 문자열 메서드 설명: substr vs substring vs slice (베스트 프랙티스)

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

.

1. 소개

JavaScript는 현대 웹 개발에서 필수적인 프로그래밍 언어입니다. 특히 문자열 조작은 데이터 포맷팅, 파싱, 동적 UI 업데이트 등에 자주 사용됩니다.

이 문서에서는 자주 사용되는 JavaScript 문자열 메서드인 substr, substring, slice 세 가지에 대해 자세히 설명합니다. 이 메서드들은 기능이 비슷하지만 차이점을 이해하면 상황에 맞는 가장 적절한 메서드를 선택하는 데 도움이 됩니다.

또한 substr가 왜 폐기(deprecated)되었는지 논의하고, 권장 대체 방법을 소개하며, 최신 JavaScript 모범 사례에 맞게 코드를 정리하는 실용적인 조언을 제공합니다.

2. 각 메서드의 기본 개요 및 사용법

이 섹션에서는 substr, substring, slice의 기본 문법과 사용법을 자세히 설명합니다. 각 메서드를 이해하면 적절한 메서드를 선택하여 코드 가독성과 유지보수성을 높일 수 있습니다.

2.1 substr 메서드

문법:

string.substr(start, length)

설명:

• start : 추출을 시작할 위치(인덱스)를 지정합니다. 인덱스는 0부터 시작합니다.
• length : 추출할 문자 수를 지정합니다. 생략하면 시작 위치부터 문자열 끝까지 추출합니다.

예시:

let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"
console.log(str.substr(4, 6)); // Output: "Script"

중요 참고 사항:
substr 메서드는 폐기(deprecated) 되었으며, 최신 JavaScript 개발에서는 사용이 권장되지 않습니다. 대신 slice 또는 substring을 대안으로 사용하십시오.

대체 예시 (slice 사용):

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"
console.log(str.slice(4));   // Output: "Script"

2.2 substring 메서드

문법:

string.substring(start, end)

설명:

• start : 추출을 시작할 위치를 지정합니다.
• end : 추출을 종료할 위치를 지정합니다(이 인덱스의 문자는 포함되지 않음).

예시:

let str = "JavaScript";
console.log(str.substring(0, 4));  // Output: "Java"
console.log(str.substring(4, 10)); // Output: "Script"

핵심 포인트:

1. 인수 순서가 자동으로 조정됨: substring(10, 4)와 같이 지정하면 자동으로 substring(4, 10)으로 해석됩니다.
2. 음수 값은 무시됨: 음수 값을 전달하면 0으로 처리됩니다.

음수 값이 필요할 때의 대안 (slice 사용):

let str = "JavaScript";
console.log(str.slice(-6)); // Output: "Script"

2.3 slice 메서드

문법:

string.slice(start, end)

설명:

• start : 추출을 시작할 위치를 지정합니다.
• end : 추출을 종료할 위치를 지정합니다(이 인덱스의 문자는 포함되지 않음).

예시:

let str = "JavaScript";
console.log(str.slice(0, 4));  // Output: "Java"
console.log(str.slice(-6));   // Output: "Script"

핵심 포인트:

1. 음수 값을 지원함: 음수 값은 문자열 끝에서부터의 오프셋으로 해석됩니다.
2. 문자열과 배열 모두에 적용 가능: slice는 배열에도 사용할 수 있어 매우 다재다능한 메서드입니다.

3. 각 메서드 비교 표

사용 사례별 선택 가이드:

• 문자열의 짧은 부분을 추출할 때: → slice
• 음수 인덱스가 필요할 때: → slice
• 레거시 코드와의 호환성: → substr는 피하고 최신 대안으로 마이그레이션

4. 실용적인 코드 예시

기본 문자열 조작

let text = "JavaScriptProgramming";

// Extract the first 10 characters
console.log(text.slice(0, 10)); // "JavaScript"

// Extract the last 3 characters
console.log(text.slice(-3));   // "ing"

특정 패턴에서 값 추출

let url = "https://example.com/index.html";

// Get the filename
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. 사용 중단된 메서드 처리

JavaScript에서 substr 메서드는 사용 중단(deprecated)으로 간주됩니다. 이는 최신 ECMAScript 사양에서 공식적으로 권장되지 않는 접근 방식으로 분류되었기 때문입니다. 이 섹션에서는 substr의 문제점, 사용 가능한 대안, 그리고 실용적인 마이그레이션 전략을 설명합니다.

5.1 substr이 사용 중단된 이유는 무엇인가?

1. 낮은 가독성:

• substr 메서드는 두 번째 인수로 추출할 문자 수를 지정하며, 이는 시작과 끝 위치를 사용하는 다른 메서드와 다릅니다. 이러한 불일치로 인해 코드를 한눈에 이해하기 어렵습니다.

2. 사양 변경으로 인한 잠재적 미래 호환성 문제:

• ECMAScript 표준화 과정에서 오래된 기능이 사용 중단으로 표시될 수 있습니다. 따라서 장기적인 호환성을 보장하기 위해 새로운 코드에서는 substr을 피해야 합니다.

3. 음수 값 지원 없음:

• substr은 음수 값을 지원하지 않지만, slice는 음수 인덱스를 완전히 지원하여 더 유연한 문자열 추출을 허용합니다.

5.2 대안 메서드로 마이그레이션하는 방법

Case 1: 고정 길이의 부분 문자열 추출

// Deprecated code
let str = "JavaScript";
console.log(str.substr(0, 4)); // Output: "Java"

// Recommended code (slice)
console.log(str.slice(0, 4)); // Output: "Java"

Case 2: 문자열 끝 부분 추출

// Deprecated code
console.log(str.substr(-6)); // Error (negative values are not supported)

// Recommended code (slice)
console.log(str.slice(-6)); // Output: "Script"

Case 3: URL 또는 파일 이름의 일부 추출

let url = "https://example.com/index.html";

// Deprecated code
let filename = url.substr(url.lastIndexOf("/") + 1);
console.log(filename); // Output: "index.html"

// Recommended code (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // Output: "index.html"

5.3 레거시 코드에 대한 리팩토링 팁

1. 코드 스캔 실행:

• ESLint와 같은 도구를 사용하여 코드베이스에서 substr의 발생을 감지하세요.

2. 테스트 커버리지 향상:

• 리팩토링 후 동작을 확인하고 변경 사항이 회귀를 유발하지 않도록 단위 테스트를 사용하세요.

3. 점진적으로 마이그레이션:

• 코드베이스의 중요한 섹션을 우선순위로 두고 사용 중단된 메서드를 단계적으로 교체하세요.

5.4 substr에서 벗어나는 마이그레이션의 이점

1. 향상된 가독성과 유지보수성:

• 코드 의도가 더 명확해져 협업과 장기적인 유지보수가 쉬워집니다.

2. 현대 사양과의 정렬:

• ECMAScript 표준을 준수하면 미래 업데이트와 호환성이 더 원활해집니다.

3. 음수 값의 유연한 처리:

• slice를 사용하면 문자열의 시작과 끝에서 쉽게 추출할 수 있어 더 깨끗하고 간결한 코드가 됩니다.

6. 자주 묻는 질문 (FAQ)

이 섹션은 JavaScript 문자열 조작 메서드와 관련된 일반적인 질문과 답변을 요약하여 독자들이 전형적인 의심을 빠르게 해결할 수 있도록 돕습니다.

Q1: substr은 여전히 사용할 수 있나요?

A:
네, substr은 대부분의 현대 브라우저에서 여전히 작동합니다. 그러나 ECMAScript 사양에서 사용 중단되었으므로 새로운 프로젝트나 장기적인 호환성을 고려할 때 피해야 합니다.

권장 대안:

let str = "JavaScript";
console.log(str.slice(0, 4)); // Output: "Java"

Q2: slice와 substring의 차이점은 무엇인가요?

A:
아래 표는 slice와 substring의 주요 차이점을 요약합니다.

예제:

let str = "JavaScript";

// slice examples
console.log(str.slice(0, 4));   // "Java"
console.log(str.slice(-6));    // "Script"

// substring examples
console.log(str.substring(0, 4));  // "Java"
console.log(str.substring(4, 10)); // "Script"

Q3: 사용 중단된 메서드를 계속 사용하는 위험은 무엇인가요?

A:
사용 중단된 메서드를 계속 사용하면 다음과 같은 위험이 발생할 수 있습니다.

1. 브라우저 지원 종료: 미래에 substr는 브라우저에서 더 이상 지원되지 않을 수 있습니다.
2. 유지보수 비용 증가: 사용 중단된 메서드로 인한 버그나 경고를 해결하는 것은 불필요한 오버헤드를 추가할 수 있습니다.
3. 코드 품질 저하: 현대 사양에 맞추지 않으면 가독성과 유지보수성이 저하됩니다.

Q4: 긴 문자열을 처리하는 데 가장 좋은 메서드는 무엇인가요?

A:
긴 문자열을 다룰 때, slice는 유연성과 음수 인덱스 지원으로 인해 최선의 선택입니다.

예시:

let longText = "This is a very long text string used for testing purposes.";

// Get the first 10 characters
console.log(longText.slice(0, 10)); // "This is a "

// Get the last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: 음수 값을 사용하여 끝에서부터 세는 방법은 무엇인가요?

A:
slice는 음수 값을 지원하지만, substring은 음수 값을 0으로 처리하므로 주의가 필요합니다.

예시:

let str = "JavaScript";

// Extract from the end using slice
console.log(str.slice(-6));  // "Script"

// substring treats negative values as 0
console.log(str.substring(-6)); // "JavaScript"

Q6: 성능 차이가 있나요?

A:
현대 브라우저에서 slice, substring, substr 간에 유의미한 성능 차이는 없습니다. 모두 네이티브 함수로 구현되었으므로, 성능보다는 가독성과 유지보수성을 우선시하는 것이 권장됩니다.

7. 요약 및 권장 모범 사례

이 기사는 JavaScript 문자열 조작 메서드—substr, substring, slice—를 기본 사용법부터 주요 차이점, 실용적인 예시, 그리고 사용 중단된 메서드 처리 전략까지 설명했습니다.

이 섹션에서는 각 메서드를 요약하고, 현대 JavaScript 표준에 기반한 권장 모범 사례를 강조합니다.

7.1 각 메서드 요약

7.2 적절한 메서드 선택을 위한 실용적 기준

1. 간단한 범위 추출에는 substring 사용:

• 짧은 문자열을 다루고 음수 값이 필요 없을 때 권장됩니다. 예시:

  let str = "JavaScript";
  console.log(str.substring(0, 4)); // Output: "Java"
  

2. 최대 유연성을 위해 slice 선택:

• 음수 인덱스를 지원하고 더 큰 다재다능성을 제공하므로, 현대 코드에서 가장 권장되는 옵션입니다. 예시:

  let str = "JavaScript";
  console.log(str.slice(-6)); // Output: "Script"
  

3. 가능한 한 빨리 substr 교체:

• 레거시 코드베이스에서 substr을 slice 또는 substring으로 적극적으로 교체하세요.

7.3 현대 모범 사례

1. 가독성 우선:

• 명확하고 간결한 코드를 작성하면 장기적인 유지보수성이 향상됩니다.

2. 사용 중단된 메서드 제거:

• substr은 미래 업데이트에서 제거될 수 있으므로, slice 또는 substring으로 적극적으로 마이그레이션하세요.

3. 음수 값이 필요할 때 slice 사용:

• slice는 유연한 뒤쪽 추출을 제공하여 많은 실세계 사용 사례에 이상적입니다.

7.4 코딩 스타일 예시

마지막으로, 깨끗하고 유지보수 가능한 코딩 스타일로 작성된 현대 문자열 조작 예시를 몇 가지 소개합니다.

// Example: Extracting the domain from an email address
let email = "user@example.com";
let domain = email.slice(email.indexOf("@") + 1);
console.log(domain); // Output: "example.com"

// Example: Extracting a file extension from a URL
let url = "document.pdf";
let extension = url.slice(-3);
console.log(extension); // Output: "pdf"

7.5 독자를 위한 실행 계획

1. 코드 리뷰 수행:

• 기존 프로젝트에서 substr 사용 여부를 확인하고, 적절한 곳에 slice 또는 substring으로 교체하세요.

2. 새로운 코드에 모범 사례 적용:

• 현대 사양을 따르고, 가독성과 음수 인덱스 처리를 염두에 두고 코드를 설계하세요.

3. 댓글과 질문을 활용:

• 불명확한 점이나 특정 사용 사례에 대한 질문과 토론을 장려하여 커뮤니티 내에서 지식을 공유하세요.

결론

이 문서에서는 JavaScript 문자열 메서드 substr, substring, slice를 기본 문법, 사용 예시, 비교 표를 통해 설명했습니다.

• substr는 더 이상 사용되지 않으므로 피해야 합니다.
• substring은 간단한 사용 사례에 적합합니다.
• slice는 가장 유연하고 권장되는 메서드입니다.

이 지식을 활용하여 효율적이고 가독성이 높으며 유지보수가 쉬운 JavaScript 코드를 작성하세요.

8. 관련 링크 및 참고 자료

substr, substring, slice에 대한 이해를 더욱 깊게 하기 위해, 이 섹션에서는 유용한 링크와 참고 자료를 제공합니다. 공식 문서와 학습 리소스를 통해 최신 사양 및 고급 기술을 지속적으로 파악할 수 있습니다.

8.1 공식 문서

1. MDN Web Docs – JavaScript 문자열 객체

• Link: String – MDN Web Docs
• Description: JavaScript String 객체에 대한 공식 레퍼런스 문서로, 각 메서드에 대한 상세 사양과 예제가 포함되어 있습니다.

2. ECMAScript 사양 (ECMA-262)

• Link: ECMAScript Official Specification
• Description: JavaScript 언어 기능을 상세히 다루는 공식 ECMAScript 사양으로, 폐기된 메서드와 최신 업데이트를 포함합니다.

8.2 학습 사이트 및 튜토리얼

1. JavaScript.info – 문자열 메서드

• Link: JavaScript.info
• Description: 문자열 조작에 대한 포괄적인 설명으로, 기본부터 고급 사용 사례까지 실용적인 예제와 함께 제공합니다.

2. Progate – JavaScript 학습 코스

• Link: Progate
• Description: 초보자를 위한 인터랙티브 학습 플랫폼으로, 실습을 통해 JavaScript 기본을 다룹니다.

3. Dotinstall – JavaScript 입문 코스

• Link: Dotinstall
• Description: 비디오 기반 학습 플랫폼으로, JavaScript 개념을 빠르고 시각적으로 이해할 수 있습니다.

8.3 실용 샘플 코드 리소스

1. GitHub – JavaScript 샘플 프로젝트

• Link: GitHub
• Description: 오픈소스 프로젝트를 통해 실전 JavaScript 패턴과 모범 사례를 배울 수 있습니다.

2. CodePen – 인터랙티브 코드 플레이그라운드

• Link: CodePen
• Description: 실시간으로 JavaScript 코드를 공유하고 실험할 수 있는 플랫폼입니다.

8.4 추천 도서

1. JavaScript: The Definitive Guide, 7th Edition (O’Reilly)

• Overview: 최신 언어 기능까지 포괄적으로 다루는 JavaScript 참고서입니다.

2. Modern JavaScript Development Guide (Revised Edition)

• Overview: 현대 JavaScript 문법과 실전 개발 기술에 초점을 맞춘 실용 가이드입니다.

8.5 커뮤니티 및 포럼

1. Stack Overflow

• Link: Stack Overflow
• Description: 프로그래밍 관련 질문과 문제 해결을 위한 전 세계 Q&A 커뮤니티입니다.

2. Qiita

• Link: Qiita
• Description: 실용적인 JavaScript 예제가 많이 포함된 일본의 기술 아티클 플랫폼입니다.

3. Teratail

• Link: Teratail
• Description: 개발자들이 일본어로 질문할 수 있는 일본의 Q&A 사이트입니다.

요약

이 섹션에서는 공식 레퍼런스, 학습 자료, 샘플 코드 저장소, 그리고 JavaScript 문자열 조작과 관련된 개발자 커뮤니티를 소개했습니다.

핵심 정리:

1. 공식 문서를 통해 사양을 확인하세요:

• 최신 사양 및 사용 지침을 확인하는 습관을 들이세요.

2. 튜토리얼과 샘플 코드를 통해 실무 기술을 강화하세요:

• 실습 코딩은 이론적 이해와 실세계 적용을 모두 강화합니다.

3. 개발자 커뮤니티를 통해 지식을 공유하세요:

• 토론에 참여하면 전문 지식과 전문 네트워크를 확장하는 데 도움이 됩니다.