[JS] substring(), slice() 비교

Javascript 에서 substring(), slice() 함수는 모두 문자열을 잘라주는 역할 (조금씩 작동 방법이 다름)

 

substring() 

: 특정 문자열을 잘라 반환 (매개변수로 start index, last index 전달)

str.substring(start, end)

//(시작인덱스, 종료 인덱스가 가리키는 값 포함 전!)
const str = "안녕하세요?"

let first = str.substring(0, 1); //안
let second = str.substring(1, 2); //녕
let last = str.substring(str.length-1, str.length); //(5, 6"전")까지 -> ?

 

slice()

:  substring() 함수와 사용법 동일 (파라미터로 자를 문자열의 start index, last index 전달)

//(시작인덱스, 종료 인덱스가 가리키는 값 포함 전!)
const str = "안녕하세요?"

let first = str.slice(0, 1); //안
let second = str.slice(1, 2); //녕
let last = str.slice(str.length-1, str.length); //(5, 6"전")까지 -> ?

 

두 예제는 동일하게 적용! 

그렇다면, 두 함수의 차이점은? 

 

substring() vs slice()

1. start > end 일 경우 

const str = "안녕하세요?"

let first = str.slice(1, 0); // 
let second = str.substring(1, 0); //안

- slice() : 그냥 비어있는 string, 즉 ""을 리턴

- substring() : start 값과 end 값을 바꿔 처리 

   substring(1, 0) => substring(0, 1) 로 처리해 string의 첫 번째 글자 리턴

 

 

2. start 또는 end 값이 음수인 경우

const str = "안녕하세요?"

//start < 0
let slice_1 = str.slice(-2, 6); // 요?
let sub_1 = str.substring(-2, 6); // 안녕하세요?

//end < 0
let slice_2 = str.slice(0, -2); // 안녕하세
let sub_2 = str.substring(0, -2); //

- slice()

(start < 0)

음수(-)를 자유롭게 사용할 수 있어 뒤에서부터 문자열 자를 때 유용하게 사용 가능

뒤에서 2번째 글자 '요' ( 이 때, '요'는 index = 4  이므로 slice(4, 6)과 같은 값을 가짐)

 

(end < 0)

start가 음수인 경우와 마찬가지로 slice(0, -2) 인 경우 뒤에서 2번째 글자는 '요' (index = 4)

결국 slice(0, 4) 의 값을 가짐

 

- substring()

(start < 0)

start = 0 으로 취급! 예제에서 substring(-2, 6) 의 start 값은 0으로 취급 -> substring(0, 6)

 

(end < 0)

start 값과 마찬가지로 end 값도 0으로 취급

 

 

** slice() : start 또는 end 값이 음수이고, 음수의 절대값이 전체 string 길이보다 클 때

const str = "안녕하세요?"

let slice_1 = str.slice(-10, 6); // 안녕하세요?
let slice_2 = str.slice(0, -10) //

slice() 함수에서 파라미터로 전달된 음수의 절대값이 string의 길이보다 크다면? 

단순히, 음수가 0으로 처리!

 

위 예제와 같이 slice(-10, 6) 의 절대값은 string 길이인 6보다 크므로 slice(0, 6)과 같이 처리됨

slice(0, -10)도 마찬가지로 slice(0, 0)으로 처리됨