JavaScript 문자열 메서드 해설: substr vs substring vs slice (베스트 프랙티스와 최신 사용법)

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

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

1. 소개

JavaScript는 웹 개발에서 필수적인 프로그래밍 언어입니다. 특히 문자열 조작은 데이터 포맷팅, 분석, 그리고 UI를 동적으로 업데이트하는 데 자주 사용됩니다.
이 글에서는 자주 사용되는 JavaScript 문자열 메서드인 substr, substring, slice 세 가지를 자세히 설명합니다. 이 메서드들은 비슷한 기능을 제공하지만, 차이점을 이해하면 상황에 맞는 올바른 메서드를 선택하는 데 도움이 됩니다.
substr가 왜 폐기되었는지와 대체 방법을 논의하고, 최신 모범 사례에 맞는 JavaScript 작성에 대한 실용적인 조언을 제공할 것입니다.

2. 각 메서드의 기본 정보 및 사용법

이 섹션에서는 substr, substring, slice의 기본 문법과 사용법을 설명합니다. 이러한 메서드를 이해하면 적절한 메서드를 선택하고 코드 가독성과 유지보수성을 향상시킬 수 있습니다.

2.1 substr 메서드

Syntax:

string.substr(start, length)

Description:

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

Example Usage:

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

Note:
substr 메서드는 폐기(deprecated) 되었으며, 향후 코드에서는 사용을 피하는 것이 권장됩니다. 대신 slice 또는 substring을 사용하세요.

Alternative Example (using slice):

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

2.2 substring 메서드

Syntax:

string.substring(start, end)

Description:

• start : 추출을 시작할 인덱스.
• end : 끝 인덱스 (이 인덱스에 해당하는 문자는 포함되지 않음).

Example Usage:

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

Points:

1. Argument order is automatically corrected: substring(10, 4)를 호출하면 substring(4, 10)으로 처리됩니다.
2. Negative values are ignored: 음수 인수는 0으로 간주됩니다.

Alternative example when negative values are needed (using slice):

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

2.3 slice 메서드

Syntax:

string.slice(start, end)

Description:

• start : 추출을 시작할 인덱스.
• end : 끝 인덱스 (이 인덱스에 해당하는 문자는 포함되지 않음).

Example Usage:

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

Points:

1. Supports negative values: 음수 인덱스는 문자열 끝에서부터 셉니다.
2. Works for both strings and arrays: 배열에서도 요소를 추출할 수 있어 활용도가 높습니다.

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 file name
console.log(url.slice(url.lastIndexOf("/") + 1)); // "index.html"

5. 폐기된 메서드 처리 방법

JavaScript의 substr 메서드는 폐기(deprecated)되었습니다. 이는 최신 ECMAScript 사양에서 substr가 권장되지 않는 메서드로 분류되었기 때문입니다.
이 섹션에서는 substr의 문제점, 대체 메서드, 그리고 코드를 마이그레이션하는 방법을 설명합니다.

5.1 왜 substr가 폐기되었나요?

1. 가독성 저하:

• substr는 두 번째 인자를 “추출할 문자 수”로 사용하며, 다른 메서드가 종료 인덱스를 사용하는 것과 다릅니다. 이러한 불일치는 코드를 이해하기 어렵게 만듭니다.

2. 사양 변경으로 인한 향후 호환성 문제 가능성:

• ECMAScript 표준화 과정에서 오래된 기능이 폐기됩니다. 새로운 코드는 이를 의존해서는 안 됩니다.

3. 음수 값을 지원하지 않음:

• substr는 음수 인덱스를 지원하지 않지만, slice는 지원합니다.

5.2 최신 메서드로 마이그레이션하는 방법

사례 1: 고정 길이 부분 문자열 추출

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

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

사례 2: 문자열 끝 부분 추출

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

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

사례 3: URL 또는 파일명 일부 추출

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

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

// Recommended (slice)
let filenameNew = url.slice(url.lastIndexOf("/") + 1);
console.log(filenameNew); // "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)); // "Java"

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

A:
아래 표는 두 메서드의 차이점을 요약합니다:

예시:

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.";

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

// Last 10 characters
console.log(longText.slice(-10));  // "purposes."

Q5: 음수 값을 사용해 역방향으로 카운트하려면 어떻게 해야 하나요?

A:
slice를 사용하세요. substring은 음수 값을 0으로 처리합니다.
예시:

let str = "JavaScript";

// slice supports negative values
console.log(str.slice(-6));  // "Script"

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

Q6: 성능 차이가 있나요?

A: 현대 브라우저에서는 slice, substring, substr 사이에 주요 성능 차이가 없습니다. 모두 네이티브 함수이므로 마이크로 최적화보다는 가독성과 유지보수성을 우선하세요.

7. 요약 및 권장 모범 사례

이 기사에서는 JavaScript 문자열 메서드 substr, substring, slice를 탐구하며 기본 구문, 차이점, 실용적인 코드 예시, 그리고 폐기된 메서드에 대한 마이그레이션 전략을 다루었습니다. 이 섹션에서는 각 메서드의 주요 특징을 재정리하고 현대적인 모범 사례를 제시합니다.

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 교체:

• 레거시 코드를 유지할 때 slice 또는 substring으로 마이그레이션하세요.

7.3 현대 모범 사례

1. 가독성을 염두에 두고 코드 작성:

• 명확하고 간결한 코드는 장기적인 유지보수성을 향상시킵니다.

1. 폐기된 메서드 피하기:

• substr은 미래 업데이트에서 브라우저 지원이 사라질 수 있으므로—조기에 마이그레이션하세요.

1. 음수 값 작업 시 slice 사용:

• slice만 음수 인덱스를 올바르게 처리합니다.

1. 코드 품질 유지에 ESLint와 테스트 스위트 사용:

• 정적 분석은 폐기된 메서드를 감지하고 현대적인 코딩 스타일을 강제하는 데 도움이 됩니다.

7.4 현대 코딩 스타일 예시

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

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

7.5 독자를 위한 실행 계획

1. 기존 코드 검토:

• 프로젝트에서 substr이 사용되는지 확인하고 필요 시 교체하세요.

1. 새 코드에서 모범 사례 따르기:

• 현대적이고 유연한 패턴을 사용하며 폐기된 기능을 피하세요.

1. 댓글과 커뮤니티 질문을 활용:

• 질문을 공유하거나 사용 사례를 통해 다른 사람들을 돕고 자신의 이해를 강화하세요.

결론

이 기사에서는 JavaScript의 substr, substring, slice 메서드에 대한 심층 설명을 제공하며 구문, 예시, 비교 테이블, 마이그레이션 전략을 포함했습니다.

• substr은 폐기되었으므로 피하세요.
• 간단한 시나리오에는 substring 사용.
• 최대 유연성과 현대 모범 사례를 위해 slice 사용.

이 통찰을 활용해 효율적이고 유지보수 가능한 JavaScript 코드를 작성하세요.

8. 관련 링크 및 참고 자료

substr, substring, slice에 대한 이해를 심화하기 위해 도움이 되는 링크와 참고 자료를 여기에 정리했습니다. 공식 문서와 학습 자료는 최신 JavaScript 업데이트와 기술을 따라가는 데 도움이 됩니다.

8.1 공식 문서

1. MDN Web Docs – JavaScript String Object

• 링크: String – MDN Web Docs
• 개요: JavaScript의 String 객체에 대한 완전한 참조로 상세한 사양과 예시를 제공합니다.

1. ECMAScript Specification (ECMA-262)

• 링크: ECMAScript 공식 사양
• 개요: 최신 ECMAScript 기능, 폐기된 메서드 및 기술 세부 정보를 다루는 공식 언어 사양입니다.

8.2 학습 사이트 및 튜토리얼

1. JavaScript.info – 문자열 조작 가이드

• 링크: JavaScript.info
• 개요: 기본 및 고급 문자열 작업을 실용적인 예제와 함께 포괄적으로 다루는 가이드입니다.

1. Progate – JavaScript 초급에서 중급 과정

• 링크: Progate
• 개요: 실용적인 코딩 연습을 통해 배우기에 적합한 인터랙티브 플랫폼입니다.

1. DotInstall – JavaScript 입문 강의

• 링크: DotInstall
• 개요: 짧은 동영상 강의로 JavaScript를 시각적으로 빠르게 배울 수 있습니다.

8.3 실용적인 샘플 코드 리소스

1. GitHub – JavaScript 샘플 프로젝트

• 링크: GitHub
• 개요: 오픈소스 프로젝트를 탐색하여 모범 사례와 실제 패턴을 배울 수 있습니다.

1. CodePen – 인터랙티브 코드 공유

• 링크: CodePen
• 개요: 다른 개발자와 코드를 공유하고 테스트하거나 영감을 얻기 위해 예제를 탐색할 수 있습니다.

8.4 추천 도서

1. JavaScript: The Definitive Guide (7th Edition)

• 개요: 기본부터 고급 기능까지 JavaScript를 포괄적으로 다루는 권위 있는 레퍼런스입니다.

1. Mastering Modern JavaScript – Revised Edition

• 개요: 최신 JavaScript와 최신 코딩 표준에 초점을 맞춘 실용적인 레퍼런스입니다.

8.5 커뮤니티 및 포럼

1. Stack Overflow (일본어)

• 링크: Stack Overflow
• 개요: JavaScript 문제를 효율적으로 해결할 수 있는 Q&A 커뮤니티입니다.

1. Qiita

• 링크: Qiita
• 개요: 실용적인 기사와 JavaScript 사례 연구가 풍부한 일본어 플랫폼입니다.

1. Teratail

• 링크: Teratail
• 개요: 모국어로 기술 질문을 할 수 있는 일본어 Q&A 사이트입니다.

결론

이 섹션에서는 공식 레퍼런스부터 튜토리얼, 샘플 코드 저장소, 커뮤니티 플랫폼에 이르기까지 다양한 리소스를 소개하여 JavaScript 문자열 작업에 대한 지속적인 학습을 지원합니다.

핵심 요점:

1. 공식 문서를 정기적으로 확인하세요:

• 최신 표준에 맞게 코딩 스타일을 유지합니다.

2. 실습 코딩을 통해 실력을 강화하세요:

• 연습을 통해 개념이 명확해지고 실제 적용 능력이 향상됩니다.

3. 커뮤니티에 참여하세요:

• 질문과 해결책을 공유함으로써 이해를 깊게 하고 네트워크를 확장할 수 있습니다.