예제 7-7. string 객체의 메소드 활용
WEB/JAVASCRIPT-CONCEPT 2017. 10. 28. 17:36 |\
* 문자열 길이, length
String 객체의 length 프로퍼티는 문자열의 길이를 알려주는 읽기 전용 프로퍼티이다.
ex)
var hello = new string("Hello");
var every = "Boy and Girl";
var m = hello.length; // m은 5
var n = every.length; // n은 12
var n = "Thank you".length; // n은 9
메소드 | 설명 |
charAt(index) | 인덱스 idx에 있는 문자를 문자열로 만들어 리턴 |
charCodeAt(index) | 인덱스 idx에 있는 문자를 16비트 유니코드 값 리턴 |
concat(s1,s2....sN) | 현재 문자열 뒤에 문자열 s1,s2...sN을 순서대로 연결한 새로운 문자열 리턴 |
indexOf(s,ida) | 인덱스 idx 위치부터 문자열 s가 처음으로 나타나는 인덱스 리턴. idx가 생략되면 처음부터 검색. 발견할 수 없으면 -1 리턴 |
replace(strA,strB) | 문자열 strA를 찾아 strB로 수정한 새로운 문자열 리턴 |
slice(idxA,idxB) | 인덱스 idxA에서 idxB 앞까지 문자열을 복사하여 리턴. idxB가 생략되면 idxA에서 끝까지 리턴 |
split([separator.limit) | separator 문자열을 구분자로 하여 문자열을 분리하여 문자열 배열을 만들어 리턴. limit는 리턴하는 배열의 크기를 제한하는 정수 |
substr(idxA,len) | 인덱스 idxA에서부터 len 문자 개수만큼 새로운 문자열 리턴. len이 생략되면 문자열 끝까지 리턴 |
substring(idxA,idxB) | idxA에서 idxB 앞까지 두 인덱스 사이의 문자열 리턴 |
trim() | 문자열의 앞뒤 공백 문자(빈칸, 탭, 엔터키)를 제거한 새로운 문자열 리턴 |
toLowerCase() | 소문자로 변환된 새로운 문자열 리턴 |
toUpperCase() | 대문자로 변환된 새로운 문자열 리턴 |
fromCharCode(char) | char의 문자를 문자열로 만들어 리턴 |
string 활용
* 문자열 비교
- 두 문자열이 같은 지 비교할 때는 간단히 == 연산자를 이용한다.
>, <, <=, >= 연산자는 사전에 나오는 순서를 비교한다.
* 문자열 연결
문자열 연결은 '+' 연산자나 concat() 메소드를 호출한다.
* 서브스트링 찾기
indexOf()는 문자열 내에서 문자열을 검색하여 시작 인덱스를 리턴한다. 없으면 -1을 리턴한다.
ex)
var every = "Boys and Girls";
var index = every.indexOf("and"); // evey에서 "and"를 검색하여 인덱스 5 리턴
* 서브스트링 리턴
slice(), substr(), substring()은 내부 문자열을 리턴한다.
ex)
var a = every.slice(5,8); // 인덱스 5에서 8 이전의 문자열 "and" 리턴
var b = every.substr(5,3); // 인덱스 5부터 3개의 문자로 구성된 "and" 리턴
var c = every.substring(5,8); // 인덱스 5부터 8 이전의 문자열 "and" 리턴
* 문자열 변경
replace()을 이용하면 일부 문자열을 다른 문자열로 변경할 수 있다.
ex)
var d = every.replace("and","or"); // "and"를 찾아 "or"로 변경. d = "Bodys or Girls"
var daughter = "황기태".replace("기태","수희"); // daughter는 "황수희"
* 대소문자 변경
toUpperCase()는 문자열을 대문자로, toLowerCase()는 소문자로 변경한다.
ex)
var upper = every.toUpperCase(); // upper = "BOYS AND GIRLS"
var lower = every.toLowerCase(); // lower = "boys and girls"
* 문자열 분할
split()은 문자열을 여러 개의 문자열로 분할 리턴한다. 다음은 빈칸(" ")을 기준으로 every의 문자열을 "Boys","and","Girls"로 분할하고 이 3개의 문자열로 구성된 배열을 리턴한다.
ex)
var sub = every.split(" ");
// 실행 결과 3개의 문자열을 가진 배열 sub 생성. sub[0] = "Boys", sub[1] = "and", sub[2] = "Girls"
// sub 배열의 원소 개수는 3, sub.length로 알 수 있음
* 문자열 앞뒤의 공백 제거
trim() 메소드는 문자열 앞뒤의 공백을 제거한다.
var name = " kitae ";
name = name.trim(); // trim()은 앞뒤 공백을 제거하여 "kitae" 리턴
* 부주의 하게 이름 앞뒤로 빈칸을 입력하는 경우가 종종 발생하는데. 사용자가 입력한 그대로 " kitae "를 사용하여 웹 서버의 데이터 베이스를 검색하면 검색이 정확히 이루어지지 않게 된다. 그러므로 먼저 자바스크립트 코드에서 앞뒤 공백을 제거하여 "kitae"로 만들어야한다.
* 문자열 내의 문자 알아내기
charAt()은 문자열 내에서 특정 위치에 있는 문자를 알아내기 위해쓰인다.
다음 코드는 every 객체의 첫 번째 문자 B를 문자열 "B"로 리턴된다.
ex)
var first = every.charAt(0); // first="B"
예제 7-7. string 객체의 메소드 활용
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>String 객체의 메소드 활용</title></head> <body> <h3>String 객체의 메소드 활용</h3> <hr> <script> var a = new String("Boys and Girls"); var b = "!!"; document.write("a : " + a + "<br>"); // B document.write("b : " + b + "<br><hr>"); // Boys and Girls!! document.write(a.charAt(0) + "<br>"); // 문자열 내 문자 알아내기 // B document.write(a.concat(b, "입니다") + "<br>"); // 문자열 연결 // Boys and Girls!! document.write(a.indexOf("s") + "<br>"); // 서브스트링 찾기 없으면 -1 // 3 document.write(a.indexOf("And") + "<br>"); // 서브스트링 찾기 없으면 -1 // -1 document.write(a.slice(5, 8) + "<br>"); // 서브스트링 리턴 // and document.write(a.substr(5, 3) + "<br>"); // 서브스트링 리턴 // and document.write(a.toUpperCase() + "<br>"); // 대문자로 변경 // BOYS AND GIRLS document.write(a.replace("and", "or") + "<br>"); // 문자열 변경 // Boys or Girls document.write(" kitae ".trim() + "<br><hr>"); // 문자열 앞뒤 공백 제거 // kitae var sub = a.split(" "); // 문자열 분할 (""안에 다른수넣으면 그거 기준으로 분할) document.write("a를 빈칸으로 분리<br>"); for(var i=0; i<sub.length; i++) document.write("sub" + i + "=" + sub[i] + "<br>"); // sub0=Boys // sub1=and // sub2=Girls document.write("<hr>String 메소드를 실행 후 a와 b 변함 없음<br>"); document.write("a : " + a + "<br>"); // Boys and Girls document.write("b : " + b + "<br>"); // !! </script> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
예제 7-9. new Object()로 계좌를 표현하는 account 객체 만들기. 예제 7-10. 리터럴 표기법으로 계좌를 표현하는 account 객체 만들기 (0) | 2017.10.30 |
---|---|
예제 7-8. Math를 이용한 구구단 연습 (0) | 2017.10.30 |
예제 7-5. Date 객체 생성 및 활용. 예제 7-6 방문 시간에 따라 변하는 배경색 만들기 (0) | 2017.10.28 |
예제 7-4. Array 객체의 메소드 활용 (0) | 2017.10.28 |
예제 7-2. []로 배열 만들기, 예제 7-3. Array 객체로 배열 만들기 (0) | 2017.10.28 |