JavaScript에서 substr()과 substring()의 차이점
JavaScript에는 문자열의 일부를 추출하는 대표적인 메서드로 substr()과 substring()이 있습니다. 두 메서드는 비슷한 결과를 출력하지만, 메서드 자체는 물론 매개변수의 의미도 서로 다릅니다.
핵심적인 차이는 다음과 같습니다. substring() 메서드의 두 번째 매개변수는 추출을 중단할 종료 인덱스를 의미하는 반면, substr() 메서드의 두 번째 매개변수는 반환할 문자열의 최대 길이를 의미합니다.
핵심 차이점 요약
substring(시작 인덱스, 종료 인덱스): 시작 인덱스부터 종료 인덱스 직전까지의 문자를 반환합니다.substr(시작 인덱스, 길이): 시작 인덱스부터 지정한 길이만큼의 문자를 반환합니다.- 음수 처리 방식도 다릅니다.
substr()은 음수 시작 인덱스를 지원하여 문자열 끝에서부터 거꾸로 계산하고,substring()은 음수 값을 0으로 취급합니다.
substr() 메서드 예제
JavaScript에서 substr() 메서드를 사용한 예제를 살펴보겠습니다.
<html>
<head>
<title>JavaScript String substr() Method</title>
</head>
<body>
<script>
var str = "Apples are round, and apples are juicy.";
// 인덱스 1부터 2글자 추출
document.write("(1,2): " + str.substr(1,2));
// 뒤에서 2번째 문자부터 2글자 추출
document.write("<br />(-2,2): " + str.substr(-2,2));
// 인덱스 1부터 끝까지 추출
document.write("<br />(1): " + str.substr(1));
document.write("<br />(-20, 2): " + str.substr(-20,2));
document.write("<br />(20, 2): " + str.substr(20,2));
</script>
</body>
</html>위 코드에서 str.substr(1,2)는 인덱스 1부터 2글자를 가져오므로 "pp"를 반환하고, str.substr(-2,2)는 문자열 끝에서 두 번째 문자부터 2글자를 가져오므로 "y."를 반환합니다.
substring() 메서드 예제
이번에는 substring() 메서드를 사용한 예제를 살펴보겠습니다.
<html>
<head>
<title>JavaScript String substring() Method</title>
</head>
<body>
<script>
var str = "Apples are round, and apples are juicy.";
// 인덱스 1부터 인덱스 2 직전까지 추출
document.write("(1,2): " + str.substring(1,2));
// 인덱스 0부터 인덱스 10 직전까지 추출
document.write("<br />(0,10): " + str.substring(0, 10));
// 인덱스 5부터 끝까지 추출
document.write("<br />(5): " + str.substring(5));
</script>
</body>
</html>위 코드에서 str.substring(1,2)는 인덱스 1부터 인덱스 2 직전까지 한 글자만 가져오므로 "p"를 반환하고, str.substring(0,10)은 "Apples are"를 반환합니다.
참고: 최신 JavaScript에서의 권장 사항
substr()은 과거 브라우저 호환성을 위해 유지되는 레거시 기능으로, 표준 문서(MDN)에서는 새로운 코드에서 사용하지 않을 것을 권장합니다. 현대적인 개발에서는 slice() 또는 substring()을 사용하는 것이 좋습니다. 특히 slice()는 음수 인덱스를 지원하면서도 표준화된 방법이기 때문에 가장 널리 권장됩니다.