String 메소드 [문자열][Javascript]

[광고 누르면 오늘의 행운 상승!!]

String 객체란?

• 기본 데이터 타입인 문자열에 대응하는 객체 타입

• 문자열에 관련된 다양한 메소드를 제공하여 문자열을 가공할 수 있게 해줌

• String 객체의 사용
  생성자를 이용하여 String 객체를 만들 수 있음

var StringObject = new String("Hello World!"); // String 객체로 만듬
document.writeln("<p>" + stringObject.valueOf() + "</p>"); String 객체 메소드인 valueOf
document.writeln("<p>" + stringObject.length() + "</p>"); 문자열의 길이 반환

 

• 기본 데이터 타입인 문자열에 String 프로퍼티나 메소드를 적용
  → 문자열은 String 객체로 변환됨

var s = "wELCOME TO MY WORLD!";
document.writeln("<p>" + s.length + "</p>);

//결과 : 20

 

• HTML 요소 지정 메소드
  -String 객체의 문자열 값을 HTML 형식으로 만들어 주는 메소드

document.writeln("<p>" + StringObject.valueOf+ "</p>); 
//String 객체의 값을 보여줍니다.

document.writeln("<p>" + StringObject.big+ "</p>); 
//문자열을 크게 합니다.

document.writeln("<p>" + StringObject.blink+ "</p>); 
//문자열을 깜빡이게 합니다.

document.writeln("<p>" + StringObject.bold+ "</p>); 
//문자열을 굵게 합니다.

document.writeln("<p>" + StringObject.italics+ "</p>); 
//문자열을 이텔릭 체로 변경합니다.

document.writeln("<p>" + StringObject.small+ "</p>); 
//문자열을 작게 합니다.

document.writeln("<p>" + StringObject.strike+ "</p>); 
//문자열에 가로선을 넣습니다.

document.writeln("<p>" + StringObject.sub+ "</p>); 
//문자열을 아래첨자로 만듭니다.

document.writeln("<p>" + StringObject.sup+ "</p>); 
//문자열을 윗첨자로 만듭니다.

• 텍스트의 외형적인 부분을 설정
  → CSS로도 가능
  → 특별한 경우가 아니라면 사용하지 않는다.
  → blink 메소드는 최신 웹 브라우저에서 지원하지 않는다.

String 메소드

indexOf
- 문자열에서 첫 번째로 일치하는 문자의 위치를 반환

var StringObject = new String(
"JavaScript was originally developed in Netscape,by Brendan Eich.")

document.writeln("<p>" + stringObject.indexOf("Netscape") + "</p>");

- Netscape가 첫 번째로 나오는 시작 위치를 반환
- 문자열의 카운트는 0부터 시작
- 위 코드 결과 : 39가 웹 브라우저에 출력

lastIndexOf
- 문자열에서 마지막으로 일치하는 문자의 첫 번째를 위치를 반환

var StringObject = new String(
"the quick brown fox jumps over the lazy dog.")

document.writeln("<p>" + stringObject.indexOf("the") + "</p>");
document.writeln("<p>" + stringObject.lastindexOf("the") + "</p>");

- "the quick brown fox jumps over the lazy dog." 
   에서 the의 시작위치를 찾음

- indexOf("the")의 결과로는 가장 첫 번째 나오는 the의 시작점인 0 반환
- lastindexOf의 결과로는 가장 마지막에 나오는 the의 시작점 31 반환 

 

substr
- 메소드 인자로 문자의 시작 위치와 길이를 전달
→ String 객체의 값에서 해당 문자열을 반환

var StringObject = new String("the quick brown fox jumps over 
the lazy dog");

document.writeln("<p>" + stringOjbect.substr(4,5) + "</p>");

- stringObject.substr(4,5)는 반환되는 문자열의 시작위치가 4이고 길이가 5입니다.
- 문자열 인덱스는 0부터 시작하므로 4번째 문자열은'q'입이고, 길이가 5이면
반환되는 문자열은 "quick"입니다.
- 웹 브라우저에 "quick"이 출력됩니다.

 

slice
- slice 메소드는 substr과 비슷함
- 단, 두 번째 메소드 인자가 문자열의 길이가 아니라 끝나는 위치임

document.writeln("<p>" + stringObject.slice(4,10) + "</p>");

- 웹 브라우저에 "quick"이 출력됩니다.

 

concat
- 메소드 인자를 String 객체에 연결함

var stringObject = new String
("JavaScript was originally developed in Netscape, by");

document.writeln("<p>" + stringOjbect.concat("Brendan Eich") + ".</p>";

- 출력
JavaScript was originally developed in Netscape, by
Brendan Eich

 

split
- 메소드 인자로 전달된 구분자로 문자를 분할하여 배열로 반환함
- split을 사용하면 문자열을 체계적으로 데이터화 시킬 수 있음

var st = "이름 : 홍길동, 나이: 30, 직업 : 의적";

var dataSplit = st.split(",");
for(var i in dataSplit){
	var valueSplit = dataSplit[i].split(":");
  document.writeln("<p>" + i + "." + valueSplit[0] + " ==> + valueSplit[1] + "</p>");
}

-출력
0. 이름 ==> 홍길동
1. 나이 ==> 30
2. 직업 ==> 의적