[JavaScript] 자바스크립트 문자열 자르기 slice, substring, substr

자바스크립트 문자열 추출하는 방법입니다.

다음 함수는 모두 문자열 잘라서 반환해주는 함수입니다. 약간의 작동 방법이 다릅니다.

파라미터로 입력받는 값이 다르니 주의하여 사용하시길 바랍니다.

 

substr(start index, length)

• 파라미터로 입력 받은 start index부터 length 길이만큼 문자열을 잘라내여 반환합니다.
• index는 0부터 시작합니다.

예제)

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

 

slice(start index, end index)

• 문자열에서 파라미터로 입력 받은 start index부터  end index 앞까지 잘라서 해당 문자열을 반환합니다.
• index는 0부터 시작합니다.

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

 

substring(start index, end index)

• 문자열에서 파라미터로 입력 받은 start index부터 end in index 앞 까지 잘라서 해당 문자열을 반환합니다. 
• index는 0부터 시작합니다.
• slice 함수와의 차이점은 아래에서 말씀드리겠습니다.

예제)

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

위 예제에서 처럼 end index 앞까지 만을 잘라서 추출하여 반환합니다.

 

slice, substring 차이점

1. start index > end index 일 경우

• start < end 일 때는 동일하게 처리합니다.
• 하지만 파라미터로 전달되는 값이 start > end 일 경우 두 함수의 처리는 다릅니다.
• substring은 start와 end의 위치를 바꿔서 결과를 계산합니다. 
• slice는 빈 문자열('')을 리턴합니다.

예제)

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

2. start index가 음수일 때

• substring은 start가 음수일 때 0으로 처리합니다.
• 예를 들어 substring(-3, 4)는 substring(0, 4)로 처리합니다.
• slice는 start가 음수일 때 문자열 끝에서부터 인덱스를 계산합니다.
• 예를 들어 slice(-3, 4)는 끝 인덱스부터 앞으로 3번째부터  처음 인덱스부터 4번째 인덱스 앞까지의 문자열을 잘라 반환합니다.

예제)

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.

 

3. end index가 음수일 때

• substring은 end index가 음수일 때 0으로 처리됩니다
• slice는 문자열 끝에서 앞쪽으로 이동하여 인덱스를 계산합니다.

See the Pen Untitled by yunjunshin (@yjshin) on CodePen.