[JavaScript]특정 문자열을 제거하는 4가지 방법

JavaScript에서 특정 문자열을 제거하는 4가지 유용한 방법을 소개합니다.

 

substr(), substring(), slice(), replace() 4가지 함수를 사용하여 문자열을 제거할 수 있습니다.

 

replace() 함수는 문자열을 대체하는 기능을 가졌지만, 특정 문자열을 빈 값('')으로 대체함으로써 제거하는 방법처럼 사용할 수 있습니다.

 

이번 포스팅은 위에서 소개한 4가지 함수 사용 방법을 정리하였습니다.

---

substr() 함수를 사용하여 길이만큼 문자열을 추출

substr() 함수는 특정 위치에서 시작하여 길이만큼 문자열을 반환합니다.

str.substr(start, length)

start

- 추출하고자 하는 문자열의 시작 위치입니다.

- 음수일 경우 시작 위치는 문자열의 길이 + start의 결괏값으로 설정됩니다.

 

length(생략 가능)

- 시작 위치에서 추출할 문자들의 개수입니다.

- 생략하면, 마지막 위치까지 추출합니다.

- 음수일 경우 substr 함수는 빈 값을 반환합니다.

var str = 'ABCDEF';

// 1번째 위치에서 마지막까지 추출합니다.
console.log(str.substr(1));
// BCDEF

// 1번째 위치에서 4개의 문자열을 추출합니다.
console.log(str.substr(1, 4));
// BCDE

// 첫 번째 매개변수가 음수일 경우 
// 첫 번째 매개변수의 값 : str.length + (-5) = 1
// 즉, 1번째 위치에서 2개의 문자열을 추출합니다.
console.log(str.substr(-5, 2));
// BC

맨 마지막 코드인 console.log(str.substr(-5, 2));의 동작 과정입니다.

 

첫 번째 매개변수가 음수인 -5이므로 str.length + (-5)의 결괏값으로 설정됩니다.

 

str.length가 6이므로 위 계산식의 결과는 1입니다. 

 

그러므로 1번째 위치에서 2개의 문자열을 추출합니다.

 

substr 함수 주의사항

substr함수는 동작하는데 문제가 없으나 바람직하지 않은 특징을 가지고 있습니다.

언젠가는 제거될 함수이므로 substr 함수가 무조건 존재한다고 생각하시면 안 됩니다.

---

substring() 함수를 사용하여 인덱스 범위만큼 문자열을 추출

substring() 함수는 특정 위치에서 시작하여 특정 인덱스 전 까지 문자열을 반환합니다.

str.substring(indexStart, indexEnd)

indexStart

- 추출하고자 하는 문자열의 시작 인덱스입니다.

- 0 보다 작을 경우 0으로 처리됩니다.

- 문자열이 길이보다 큰 값이면, 문자열의 길이로 처리되어 substring() 함수는 빈 값을 반환합니다.

 

indexEnd(생략 가능)

- 설정된 값의 이전 인덱스까지 문자열을 추출합니다.

- 생략하면 마지막 인덱스까지 문자열을 추출합니다.

var str = 'ABCDEF';

// 1번째 인덱스에서 마지막 위치까지 문자열을 반환합니다.
console.log(str.substring(1));
// BCDEF

// 1번째 인덱스에서 4번째 인덱스 전 까지 문자열을 반환합니다.
console.log(str.substring(1, 4));
// BCD

// str.substring(1, 4) 동일한 결과입니다.
console.log(str.substring(4, 1));
// BCD

// 음수이므로 0번째 인덱스로 설정됩니다.
console.log(str.substring(-1));
// ABCDEF

 

str.substring(4, 1); 코드는 str.substring(1, 4);의 결과와 동일합니다.

 

substring 함수는 첫 번째 매개변수가 두 번째 매개변수보다 큰 경우, 두 매개변수의 값을 교체한 것처럼 동작합니다.

반응형

---

slice 함수를 사용하여 인덱스 범위만큼 문자열을 생성

slice() 함수는 인덱스 범위로 문자열을 자른다는 개념은 substring() 함수와 동일하지만 미묘한 차이가 존재합니다.

str.substring(indexStart, indexEnd)

indexStart

- 추출하고자 하는 문자열의 시작 인덱스입니다.

- 0 보다 작을 경우 문자열의 길이 + indexStart의 결괏값으로 설정됩니다.

- 문자열이 길이보다 크거나 같으면, 빈 값을 반환합니다.

 

indexEnd(생략 가능)

- 설정된 값의 이전 인덱스까지 문자열을 추출합니다.

- 생략하면 마지막 인덱스까지 문자열을 추출합니다.

- 0 보다 작을 경우 문자열의 길이 + indexEnd의 결괏값으로 설정됩니다.

var str = 'ABCDEF';

// 1번째 인덱스에서 마지막 위치까지 문자열을 반환합니다.
console.log(str.slice(1));
// BCDEF

// 1번째 인덱스에서 4번째 인덱스 전 까지 문자열을 반환합니다.
console.log(str.slice(1, 4));
// BCD

// 첫 번째 매개변수의 값: 문자열의 길이(6) + (-1) = 5 입니다.
// 두 번째 매개변수가 생략되었기에 5번째 인덱스에서 마지막 위치까지 문자열을 반환합니다.
console.log(str.slice(-1));
// F

// 첫 번째 매개변수의 값: 문자열의 길이(6) + (-4) = 2 
// 두 번째 매개변수의 값: 문자열의 길이(6) + (-1) = 5 
// 2번째 인덱스에서 5번째 인덱스 전 까지 문자열을 반환합니다.
console.log(str.slice(-4 , -1));
// CDE

---

substring() 함수와 slice() 함수의 차이점

substring() 함수와 slice() 함수는 매개변수의 값이 음수일 경우 동작되는 방식이 다릅니다.

• substring() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 값을 교환하여 동작합니다.
• slice() 함수는 첫 번째 매개변수가 두 번째 매개변수보다 클 경우 빈 값을 반환합니다.
• substring() 함수는 첫 번째 매개변수가 음수일 경우 0으로 처리됩니다.
• slice() 함수는 첫 번째 매개변수가 음수일 경우 문자열의 길이 + 첫 번째 매개변수의 결괏값으로 설정됩니다.

---

replace() 함수를 사용하여 특정 문자열을 빈 값('')으로 대체

replace() 함수는 정규식을 만족하거나 특정 문자열이 존재할 경우 원하는 문자열로 대체할 수 있습니다.

var str = 'ABCDEF';

// 문자열 'A'를 빈 값으로 대체합니다.
console.log(str.replace('A', ''));
// BCDEF

// 문자열 'F'를 빈 값으로 대체합니다.
console.log(str.slice('F', ''));
// ABCDE