JavaScript에서 substring()
과 slice()
는 문자열을 자를 때 사용하는 함수이며 사용 방법이 동일합니다.
하지만 약간의 차이점이 있습니다. 차이점에 대해서 알아보겠습니다.
1. Syntax
substring과 slice는 모두 start와 end Index를 인자로 받고 start를 포함하고 end를 포함하지 않는 문자열을 잘라서 리턴합니다.
str.substring(start, end)
str.slice(start, end)
예를 들어, 아래와 같이 인자로 0과 5를 전달하면 Index 0을 포함하고 5를 포함하지 않는 Index 4까지의 문자열을 잘라서 리턴합니다.
let str = 'Hello World';
let a = str.substring(0, 5)
let b = str.slice(0, 5)
console.log(a)
console.log(b)
Output:
Hello
Hello
2. 차이점 : start > end 일 때
start < end
일 때는 위와 같이 동일한 문자열을 리턴하지만 start > end
일 때는 결과가 다릅니다.
substring은 start > end
일 때, start와 end의 위치를 바꿔서 결과를 계산합니다. 즉, substring(5, 0)
은 substring(0, 5)
으로 계산됩니다.
반면에 slice는 start > end
일 때 빈 문자열('')을 리턴합니다.
let str = 'Hello World';
let a = str.substring(5, 0)
let b = str.slice(5, 0)
console.log('a: ' + a)
console.log('b: ' + b)
Output:
a: Hello
b:
3. 차이점 : start가 음수일 때
start가 음수 일 때 substring과 slice의 계산 결과가 달라집니다.
substring은 start가 음수일 때 0으로 변경되고, slice는 음수일 때 문자열 끝에서 앞쪽으로 음수만큼 이동된 Index로 계산됩니다.
예를 들어 substring(-8, 10)
는 substring(0, 10)
로 계산되고, slice(-8, 10)
는 slice(3, 10)
로 계산됩니다.
let str = 'Hello World';
let a = str.substring(-8, 10)
let b = str.slice(-8, 10)
let c = str.substring(-8)
let d = str.slice(-8)
console.log(a)
console.log(b)
console.log(c)
console.log(d)
Output:
Hello Worl
lo Worl
Hello World
lo World
4. 차이점 : end가 음수일 때
substring은 end가 음수일 때 0으로 계산되며, slice는 문자열 끝에서 앞쪽으로 이동하여 위치를 찾습니다.
아래 예제를 보시면 차이점에 대해서 확인할 수 있습니다.
let str = 'Hello World';
let a = str.substring(0, -2)
let b = str.slice(0, -2)
console.log('a: ' + a)
console.log('b: ' + b)
Output:
a:
b: Hello Wor
아래 처럼 start와 end가 모두 음수가 될 수 있으며, slice의 경우 start > end
라면 빈 문자열이 아닌 문자열이 리턴됩니다. substring은 둘다 음수라서 그냥 빈 문자열이 리턴되구요.
let str = 'Hello World';
let a = str.substring(-5, -1)
let b = str.slice(-5, -1)
let c = str.slice(-5, -6)
console.log('a: ' + a)
console.log('b: ' + b)
console.log('c: ' + c)
결과를 보면 slice(-5, -1)
만 문자열을 리턴하고, 나머지는 빈 문자열을 리턴하였습니다.
a:
b: Worl
c:
References
Related Posts
- JavaScript Enum (열거형)
- JavaScript JSON (parse, stringify)
- JavaScript includes(), 다양한 예제
- JavaScript - forEach(), 다양한 예제로 이해하기
- JavaScript - 한글, 영어, 숫자만 입력 받기 (정규표현식)
- JavaScript - 배열 요소 무작위로 섞는 방법 (shuffle)
- JavaScript - getElementById, querySelector로 요소 찾기
- JavaScript - 첫번째 글자만 대문자로 변경, 2가지 방법
- JavaScript - 빈 문자열 확인, 2가지 방법
- JavaScript - 날짜/시간 비교, 3가지 방법
- JavaScript - 랜덤 문자열 생성, 2가지 방법
- JavaScript - 마지막 문자 제거, 4가지 방법
- JavaScript - 문자열 공백 제거, 3가지 방법
- JavaScript - 배열을 문자열로 변환, 3가지 방법
- JavaScript - 여러 줄 문자열, 3가지 방법
- JavaScript - 객체를 문자열로 변환, 2가지 방법
- JavaScript - 문자열의 첫번째 문자 가져오기, 4가지 방법
- JavaScript - 문자열의 마지막 문자 가져오기, 4가지 방법
- JavaScript - 배열 맨 앞에 요소 추가/제거, 2가지 방법
- JavaScript - 2차원 배열을 1차원 배열로 변환, 2가지 방법
- JavaScript - 현재 시간 Timestamp 가져오기
- JavaScript - 대소문자 변환 (LowerCase, UpperCase)
- JavaScript - 문자열 바꾸기(replace, 정규식 치환)
- JavaScript - setTimeout()으로 함수 실행 지연
- JavaScript - 'try...catch'로 예외 처리 방법
- JavaScript - 문자열을 날짜(Date)로 변환하는 방법
- JavaScript - 배열에서 중복 제거, 4가지 방법
- JavaScript - Float을 Integer로 변환, 3가지 방법
- JavaScript - 문자열 비교 방법, 5가지
- JavaScript - 문자열에서 문자 또는 단어 추출, 4가지 방법
- JavaScript - 문자열 뒤집기, 거꾸로 출력
- JavaScript - 배열의 마지막 요소 가져오기
- JavaScript - 배열에서 최대, 최소 값 찾기
- JavaScript - 숫자 3자리마다 콤마(,) 넣는 방법
- JavaScript - 소수점 자리수 올림, 내림, 반올림, 제거 방법