문자열과 String객체 (메서드체이닝기법) , ECMAScript5 - trim( ) 메서드

자바스크립트에서 문자열 데이터는 다음과같이 변수에 저장하여 사용한다.

var string = 'string문자열';

 

var stringLiteral1 = 'Hello world';
var stringLiteral2 = 'Hello world';

console.log('리터럴문자열1 == 리터럴문자열2 : ',stringLiteral1 == stringLiteral2);
console.log('타입 체크 : ',typeof stringLiteral1, typeof stringLiteral2)
console.log('리터럴문자열1 === 리터럴문자열2 : ',stringLiteral1 === stringLiteral2);

 

var stringLiteral = 'Hello world';
var stringConstructor = new String('Hello world');

console.log('리터럴문자열 == 생성자문자열 : ',stringLiteral == stringConstructor);
console.log('타입 체크 : ',typeof stringLiteral, typeof stringConstructor)
console.log('리터럴문자열 === 생성자문자열 : ',stringLiteral === stringConstructor);

 

위의 결과에서 볼 수 있듯 리터럴변수에 문자열을 저장한 변수의 타입은 String이고, String 생성자 함수에 문자열을 담아 저장한 변수의 타입은 Object이다.

var stringLiteral = 'Hello world';
var stringConstructor = new String('Hello world');

console.log(stringLiteral, stringConstructor);

문자열 객체를 생성하는 new String('문자열') 은 문자열을 반환하는게 아니라 String객체의 참조 주소(메모리 주소)를 반환하기 때문이다.

더 풀어서 말하자면 일반 리터럴 변수에 저장된 문자열은 문자열 그 자체의 상태로 메모리영역에 저장되지만

String 객체의 생성자를 사용한 문자열은 Object타입으로 (업캐스팅) 메모리영역에 저장되는것이다.

때문에 둘은 다른 형태의 타입이라고 말할 수 있다.

 

다음과 같이 문자열 객체는 메서드 valueOf( ) 를 이용해 문자열 원형으로 변환할 수 있다.

var stringLiteral = 'Hello world';
var stringConstructor = new String('Hello world');

console.log(stringLiteral, stringConstructor.valueOf());

 

문자열과 String 객체는 모두 동일하게 String객체의 속성과 메서드를 사용할 수 있다.

이말은즉 일반 리터럴 문자열도 String객체에서 관리가 가능하다는 것이다.

 

 

String객체의 속성

length : 문자열의 길이를 나타낸다.

var stringLiteral = 'Hello world';
var stringConstructor = new String('Hello world');

console.log(stringLiteral.length);
console.log(stringConstructor.length);

문자열에 담겨있는 공백까지 문자열로 포함되기 때문에 11값을 출력한다.

 

 

String객체의 속성은 length 하나밖에 없지만 메서드는 굉장히 많다.

크게 기본 메서드와 HTML관련 메서드로 구분된다.

 

기본 메서드

charAt(position) : position에 위치하는 문자열을 리턴한다.

charCodeAt(position) : position에 위치하는 문자의 유니코드 번호를 리턴한다

concat(args) : 매개변수로 입력한 문자열을 이어서 리턴한다.

indexOf(searchStriong, position) : 앞에서부터 일치하는 문자열의 위치를 리턴한다.

lastIndexOf(searchString, position) : 뒤에서부터 일치하는 문자열의 위치를 리턴한다.

match(regExp) : 문자열 내에 regExp가 있는지 확인한다.

replcace(regExp, replacement) : regExp를 replacement로 바꾼 뒤 리턴한다.

search(regExp) : regExp와 일치하는 문자열의 위치를 리턴한다.

slice(start, end) : 특정 위치의 문자열을 추출해 리턴한다.

split(separator, limit) : separator로 문자열을 잘라서 배열을 리턴한다.

substr(start, count) : start로 부터 count 만큼 문자열을 잘라서 리턴한다.

substring(start, end) : start부터 end까지 문자열을 잘라서 리턴한다.

toLowerCase( ) : 문자열을 소문자로 바꾸어 리턴한다.

toUpperCase( ) : 문자열을 대문자로 바꾸어 리턴한다.

 

 

match(regExp), replcace(regExp, replacement), search(regExp) 3개의 메서드는 정규표현식과 관련된 메서드이다.

 

위에 나열된 메서드중에 주로 많이 사용되는 메서드들을 뽑자면 다음과 같다.

slice(start, end), split(separator, limit), substr(start, count), substring(start, end), toLowerCase( ), toUpperCase( )

 

주의할 점은 String객체의 메서드는 자기 자신을 변화시키지 않고 리턴하기 때문에 다음과 같이 변수에 담아야한다.

var string = 'abcdefg';

string = string.toUpperCase();
console.log(string);

 

HTML 관련 메서드

anchor( ) : a 태그로 문자열을 감싸 리턴한다.

big( ) : big 태그로 문자열을 감싸 리턴한다.

blink( ) : blink 태그로 문자열을 감싸 리턴한다.

bold( ) : b 태그로 문자열을 감싸 리터한다.

fixed( ) : tt 태그로 문자열을 감싸 리턴한다.

fontcolor( ) : font 태그로 문자열을 감싸고 color속성을 주어 리턴한다.

fontsize( ) : font 태그로 문자열을 감싸고 size속성을 주어 리턴한다.

itelics( ) : I 태그로 문자열을 감싸 리턴한다.

link( ) : 태그로 문자열을 감싸 리턴한다.

small( ) : small 태그로 문자열을 감싸 리턴한다.

strike( ) : strike 태그로 문자열을 감싸 리턴한다.

sub( ) : sub 태그로 문자열을 감싸 리턴한다.

sup( ) : sup 태그로 문자열을 감싸 리턴한다.

var string = 'Java Script';
var output = '';
output += 'anchor : ' + string.anchor() + '</br>';
output += 'big : ' + string.big() + '</br>';
output += 'blink : ' + string.blink() + '</br>';
output += 'bold : ' + string.bold() + '</br>';
output += 'fixed : ' + string.fixed() + '</br>';
output += 'fontcolor : ' + string.fontcolor() + '</br>';
output += 'fontsize : ' + string.fontsize() + '</br>';
output += 'italics : ' + string.italics() + '</br>';
output += 'link : ' + string.link() + '</br>';
output += 'small : ' + string.small() + '</br>';
output += 'strike : ' + string.strike() + '</br>';
output += 'sub : ' + string.sub() + '</br>';
output += 'sup : ' + string.sup() + '</br>';

document.write(output);

코드를 실행하면 아래와 같은 결과를 보여준다.

추가적으로 document.write( ) 코드는 문서객체의 write( ) 메서드인데 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력하는 메서드이다.

 

 

+ 메서드 체이닝

자바스크립트 기술중 메서드 체이닝 기법이 존재한다.

간단히 번역하자면 메서드를 줄줄이 사용한다는 뜻이다.

String객체의 메서드들은 자기 자신을 바꾸지 않고 리턴하게 되어있다.

이때 메서드 체이닝 기법을 사용하면 편리하다.

var output = 'Hello world';

output = output.toLowerCase();
output = output.subString(0,5);
output = output.anchor('name');

console.log(output);

 위와같이 메서드를 호출한 후 자기 자신에 한번 더 저장했던 작업을 아래의 코드와 같이 한줄로 처리하여 한번에 저장이 가능해진다.

var output = 'Hello world';

output = output.toLowerCase().subString(0,5).anchor('name');

console.log(output);

---

ECMAScript5부터 지원하는 메서드가 있다.

 

trim( ) : 문자열 양쪽 끝의 공백을 제거한다.

 

var text = '   text   ';

var output = '';
output += '++' + text + '++\n';
output += '++' + text.trim() + '++';

alert(output);

위 코드와 같이 trim( ) 메서드를 사용하면 문자열 양쪽 끝의 공백 문자열이 제거된다.