자바스크립트(JavaScript) 공백 제거 (trim, trimStart, trimLeft, trimEnd, trimRight)

안녕하세요. 루미오입니다.

JavaScript에서 문자열(string)의 공백 제거 방법에 대해서 알아보겠습니다.

순서
● trim() : 문자열 양 끝 공백 제거
● trimStart(), trimLeft() : 문자열 앞(left) 공백 제거
● trimEnd(), trimRight() : 문자열 뒤(right) 공백 제거

 

하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.

 

JavaScript는 내장함수 5개 제공합니다. trim(), trimStart(), trimLeft(), trimEnd(), trimRight() method가 그것입니다. trim()은 IE 9 이상에서만 지원하며, trimStart(), trimLeft(), trimEnd(), trimRight() 는 IE에서 전혀 지원되지 않고 Chrome 66 이상 Firefox 61 이상에서만 지원합니다. 그렇기 때문에 호환성을 위해서 동일한 기능의 폴리필을 적용해야 합니다. 폴리필 적용은 아래를 보시면 됩니다.

[String.prototype.trim() 폴리필]
[String.prototype.trimStart() String.prototype.trimLeft() 폴리필]
[String.prototype.trimEnd() String.prototype.trimRight() 폴리필]

trim() method부터 보시겠습니다.

 

trim() : 문자열 양 끝 공백 제거하기

먼저 trim() method 재정의 하겠습니다.

/* trim() 사용법 */
var result = '';
var str = "  foo bar  ";
result = str.trim();    // 'foo bar'

→ 코드 확인 및 테스트

문자열의 앞, 뒤의 공백을 제거합니다. IE 8이하에서 사용하기 위해서는 폴리필을 적용하세요.

 

trimStart(), trimLeft() : 문자열 앞 공백 제거하기

trimStart()와 trimLeft()는 IE에서 아직 지원하지 않기 때문에 어쩔 수 없이 재정의해야 합니다. 그럼 trimStart()와 trimLeft() method 재정의하겠습니다.

/* trimStart(), trimLeft() 사용법 */
var result = '';
var str = "  foo bar  ";
result = str.trimStart();	// "foo bar  "
result = str.trimLeft();	// "foo bar  "

→ 코드 확인 및 테스트

문자열의 앞의 공백을 제거합니다. IE에서 사용하기 위해서는 폴리필을 적용하세요. trimLeft()는 trimStart()의 alias입니다. 기능은 동일하지만 호환성을 위해서 존재합니다.

 

trimEnd(), trimRight() : 문자열 뒤 공백 제거하기

trimStart()와 trimLeft()는 IE에서 아직 지원하지 않기 때문에 어쩔 수 없이 재정의해야 합니다. 그럼 trimStart()와 trimLeft() method 재정의하겠습니다.

/* trimEnd(), trimRight() 사용법 */
var result = '';
var str = "  foo bar  ";
result = str.trimEnd();	// "  foo bar"
result = str.trimRight();	// "  foo bar"

→ 코드 확인 및 테스트

문자열의 뒤의 공백을 제거합니다. IE에서 사용하기 위해서는 폴리필을 적용하세요. trimRight()는 trimEnd()의 alias입니다. 기능은 동일하지만 호환성을 위해서 존재합니다.

 

지금까지 5개의 trim 관련 method를 살펴봤습니다.

 

감사합니다.

- 루미오 . LOOMIO -