[ES6+] str.(trim/trimStart/trimEnd) - 문자열의 앞뒤 공백 제거하기

문자열의 앞뒤 공백을 제거해주는 String.prototype.trim() 메서드에 대해 알아보자.

여기서 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미한다.

 

추가적으로 ES10에서 등장한 String.prototype.trimStart() 와 String.prototype.trimEnd() 메서드에 대해서도 알아보자.

 

▷ 구문

str.trim()
str.trimStart()
str.trimEnd()

 

구문과 사용법이 매우 간단하여 예제를 통해 직접 접해보자.

---

▷ 예제 1) String.prototype.trim() 기본 사용법

let str = '      trim test     ';
console.log(str.trim()); // 'trim test'

 

위에서 그대로 설명한 것 처럼 trim()메서드는 문자열의 앞뒤 공백을 제거해준다.

(앞뒤 공백이 없다고 하여도 에러가 발생하지는 않는다.)

 

여기서 추가적으로 앞,뒤 공백을 선택적으로 제거하고 싶으면 trimStart()와 trimEnd()메서드를 사용해주면 된다.

 

trim() 메서드의 경우에는 예전부터 존재해왔기때문에 IE에서 사용이 가능하지만 trimStart()와 trimEnd() 메서드의 경우 ES10에서 등장했기 때문에 IE에서는 사용이 불가능하다.

 

▷ 예제 2) String.prototype.trimStart() 와 String.prototype.trimEnd()

let str = '      trim test     '
console.log(str.trimStart()); // 'trim test     '
console.log(str.trimEnd()); // '      trim test'

 

trimStart() 와 trimEnd() 라는 메서드명은 padStart() 와 padEnd() 메서드 와의 동일성을 위해 지어진 메서드명이며,

좀 더 직관적으로 별칭인 trimLeft() 와 trimRight()를 제공해주고 있으니 그것을 사용해도 무방하다.

let str = '      trim test     '
console.log(str.trimLeft()); // 'trim test     '
console.log(str.trimRight()); // '      trim test'

 

그래도 역시 아무래도 별칭이다보니 이런게 있다는것만 알아두고 trimStart() 와 trimEnd()를 좀 더 애용해주도록 하자.

 

trim 관련 메서드들은 문자 사이사이의 공백을 제거할 수 없으니 이럴때는 replace나 replaceAll 메서드를 사용하는게 좋다. (trim과 같이 알아두도록 하자.)

---

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

String.prototype.trim() - JavaScript | MDN

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart

String.prototype.trimStart() - JavaScript | MDN

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd

String.prototype.trimEnd() - JavaScript | MDN