프레임워크를 막론하고 Javascript를 기반으로 사용한다면 문자열을 자르는 작업은 필수적입니다. 이번엔 Javascript 문자열 자르기 방법 3가지를 알아보겠습니다.
목차
Javascript 문자열 자르기
Javascript에서 문자열을 자르는 방법에는 prototype method인 substring과 slice가 있습니다. 과거에는 substr도 사용했었지만 2018년부로 deprecated 된 상태입니다. 아직 웹 표준에서 사라진 건 아니지만, substr()은 앞으로 사용처가 없어지면 명세에서 제거된다고 합니다. 따라서 substr 사용은 지양하고 substring과 slice를 사용하는 편이 좋습니다.
하지만 기존 substr로 작성된 코드를 substring나 slice로 변경하려면 substr에 대해서도 알고 있어야겠죠? 따라서 3가지 방법 모두 살펴보겠습니다. 우선 substr 사용법을 확인한 후에 substring과 slice를 차례대로 살펴보겠습니다.
substr 사용법
MDN Web Docs에서 명백히 Deprecated 되었음을 알리고 있으며 앞으로 사용하지 말 것을 권장하고 있습니다. substr을 substring이나 slice로 리팩터링 하기 위한 이해의 목적으로 먼저 설명해 드립니다.
const str = '123456789';
console.log(str.substr(1, 3)); // 예상결과: "234"
console.log(str.substr(2)); // 예상결과: "3456789"
substr의 문법은 다음과 같습니다. start는 시작인덱스 값이며, length는 길이입니다. parameter가 1개인 경우는 substring의 경우와 동일한 결과 값을 갖습니다.
substr(start)
substr(start, length)substring 사용법
substring에는 2가지 파라미터를 입력받게 되어 있습니다. 첫째는 시작 index 값이며, 둘째는 끝 index 값입니다. 첫 index는 리턴 값에 포함되며, 둘째 index는 리턴 값에 포함되지 않습니다. 따라서 첫 인덱스부터 마지막 인덱스 직전 값까지 return 값으로 돌려받게 됩니다.
Line 3에서는 1번 인덱스에 해당하는 값인 “2”부터 3번 인덱스 직전인 “3”까지 “23”을 돌려받습니다.
그리고 Line 4에서는 첫 인덱스가 둘째 인덱스보다 크기 때문에 그 둘이 맞바뀝니다. 즉, 결국은 substring(1, 3)으로 처리되므로 Line 3과 동일한 결과가 출력됩니다.
Line 5에서는 시작 인덱스 2부터 문자열 끝까지 반환됩니다.
Line 6에서 음수는 0으로 치환되어 처리됩니다. 즉, substring(0, 3)과 동일한 결과가 됩니다.
Line 7에서 문자열 길이보다 큰 둘째 인덱스의 값은 str.length로 치환되어 처리됩니다. 따라서 substring(5, 9)와 동일한 결과가 됩니다.
여타의 프로그래밍 언어와 마찬가지로 Javascript에서도 인덱스의 첫 값은 0부터 시작하는 점 잊지 마세요.
const str = '123456789';
console.log(str.substring(1, 3)); // 예상결과: "23"
console.log(str.substring(3, 1)); // 예상결과: "23"
console.log(str.substring(2)); // 예상결과: "3456789"
console.log(str.substring(-3, 3)); // 예상결과: "123"
console.log(str.substring(5, 30)); // 예상결과: "6789"
substring의 문법은 아래와 같습니다. indexStart는 추출하고자 하는 첫 인덱스를 의미하며, indexEnd 기준으로 그 직전 인덱스까지 추출합니다.
substring(indexStart)
substring(indexStart, indexEnd)slice 사용법
slice 사용법은 substring과 거의 같습니다. 하지만 substring에서는 음수를 0으로 처리하는 한편, slice는 python에서의 문자열 처리 방식처럼 음수 사용이 가능합니다. 그리고 indexStart는 항상 indexEnd보다 작은 값을 가져야 합니다.
Line 3은 substr, substring과 사용법이 같습니다. 해당 인덱스부터 끝까지의 값을 반환합니다.
Line 4는 substring과 사용법과 결과가 동일합니다.
Line 5는 substring에서는 9와 4의 자리가 치환되어 Line 4와 동일하게 처리되지만, slice에서는 빈 문자열을 출력합니다.
Line 6은 문자열의 뒤 3번째부터 문자열 끝까지 반환합니다.
Line 7은 문자열의 뒤 11번째부터 문자열의 뒤 6번째 전까지 반환합니다.
const str = 'The quick brown';
console.log(str.slice(10)); // 예상결과: "brown"
console.log(str.slice(4, 9)); // 예상결과: "quick"
console.log(str.slice(9, 4)); // 예상결과: ""
console.log(str.slice(-3)); // 예상결과: "own"
console.log(str.slice(-11, -6)); // 예상결과: "quick"
slice의 문법은 다음과 같습니다.
slice(indexStart)
slice(indexStart, indexEnd)Refactoring(리팩터링): substr to substring or slice
기존에 substr로 된 코드를 substring이나 slice로 리팩터링하는 방법을 안내해 드립니다. 이미 위에서 각 사용법에 대해 숙지가 됐다면 충분히 할 수 있는 작업입니다. 어떻게 하면 되는지 살펴보겠습니다.
다음 코드와 같이 끝인덱스 값을 첫인덱스 값 + 길이로 처리해 주면 간단히 해결할 수 있습니다.
const str = '123456789';
console.log(str.substr(1, 3)); // 예상결과: "234"
console.log(str.substring(1, 1+3)); // 예상결과: "234"
console.log(str.slice(1, 1+3)); // 예상결과: "234"
관련 자료
MDN의 substr 페이지, substring 페이지, slice 페이지를 참고했습니다.