문자열 다루기

 

 

1.자바스크립트 문자열 다루기

 

1.0 들어가며

var city = new String("St. Louis");

var lcCity = city.toLowerCase();

 

var city = String("St. Louis");

 

문자열 리터럴도 String 객체의 메서드에 접근할 수 있다.

리터럴에서 String 객체의 메서드에 접근하면 자바스크립트 엔진은String 객체를 만들어서 문자열 리터럴을 감싸고 메서드를 호출한 후 String 객체를 버린다.

 

1.1 두개 이상의 문자열 합치기

 

var string1 = "This is a";

var string2 = "test";

var string3 = string1 + string2; //'This is a test' 문자열 생성

 

자바스크립트에서는 더하기 연산자자가 오버로드 되어 있어서 가능하다.

 

1.2 문자열과 다른 자료형 합치기

 

var numValue = "23.45";

var total    = "합계" + numValue; //문자열은 '합계:23.45'

 

자바스크립트 엔진은 다른 자료형의 값을 문자열로 자동 변환 후 문자열

합치기를 수행 합니다.

 

var strObject = new String("값은");

var stringLiteral = "문자열입니다.";

var stringValue = strObject + stringLiteral; //결과는 '값은 문자열입니다.'

 

자동 자료형 변환 기능은 String 객체와 문자열 리터럴을 합칠때도 적용된다.

 

1.3 문자열 비교하기

 

Q. 두 문자열이 같은지 비교하고 싶습니다.

A. 조건 확인에 동등연산자('==')를 사용합니다.

var strName = prompt('당신의 이름은');

if(strName == 'tester'){ // 동일한 자료형에 입력 값이 비교 값과 같으면 성공

  retrun true;

}else{

  return false;

}

 

자동 자료형 변환이 일어나지 않아서 자료형이 다르면 비교 결과가 실패로 나오기를 원할때 즉, 문자열 리터럴과 String 객체는 자료형 달라서 실패로 나오기를 바랄 경우에는 아까와 다른 업격한 동등연산자('===')를 사용한다.

 

var strObject = new String("Shelly");

var stringLiteral = "Shelly";

if(strObject === stringLiteral) // 자료형이 다르므로 실패

 

위의 비교연산자의 경우와 반대로 부등연산자('!='), 엄격한 부등연산자('!===') 가 있다.

사용방법과 의미는 위의 연산자와 동일하다.

 

 

 

비교 연산자는 산술 비교를 하지만 문자열을 알파벳 순으로 비교하기도 한다.

 

var sOne = "cat";

var sTwo = "dog";

if(sOne > sTwo) //거짓, 알파벳 순으로 "cat"은 "dog"보다 적음

 

 

 

두 문자열 리터럴을 대소문자로 구분하는 경우에는 알파벳순으로 대문자가 소문자 보다 크다.

 

var sOne = "Cat";

var sTwo = "cat";

if(sOne >= sTwo) //참. 알파벳 순으로 'C'는 'c'보다 큼

 

localCompare 메서드는 한개의 인수를 갖는데, 메서드를 실행하는 문자열 값과 비교할 문자열을 인수로 받는다. localCompare 메서드를 실행하면 숫자값을 반환한다. 0은 두개의 문자열이 똑같다는 의미이고 -1 dms 인수로 전달한 문자열이 원래의 문자열보다 문자적으로 더 크다는 의미이며, 1은 원래의 문자열이 문자적으로 더 크다는 의미이다.

 

var fruit1 = "apple";

var fruit2 = "grape";

var i = fruit1.localCompare(fruit2);//-1 반환

 

 

 

1.4 문자열에서 부분 문자열 검색하기

 

Q. 대상 문자열 안에 특정한 부분 문자열이 있는지 찾고 싶다.

A. String 객체의 내장 indexOf를 사용하면 된다.

 

var testValue = "This is the Cookbook's test string";

var subValue  = "Cookbook";

 

var iValue = testValue.indexOf(subsValue);

 

if(iValue != -1)//찾는 문자열이 존재하므로 성공

 

String 객체의 indexOf 메서드는 인덱스 또는 ㅂ분 문자열의 첫번째 글가자 있는 위치를 나타내는 숫자를 반환한다.

없는 경우 -1 을 리턴한다.

 

 

 

var testString  = "This apple is my apple";

var iValue = testString.indexOf("apple",10);

 

두번째 인수는 문자열을 검색하는 시작위치 인덱스 값이다.

 

var iValue = testString.lastIndexOf("apple");   // 17반환

var iValue = testString.lastIndexOf("apple",5); // 5반환

var iValue = testString.lastIndexOf("apple",3); // -1반환, 찾지 못햇음.

 

lastIndexOf는 마지막에 나타난 부분 문자열 인덱스 위치를 반화합니다.

 

1.5 문자열에서 부분문자열 추출하기

Q. 여러 개의 문장으로 이루어진 문자열이 있고, 그 중 하나의 문장에 어떤 목록이 포함되어 있습니다. 목록은 콜론(:)으로 시작하고 마침표(.)로 끝납니다. 문자열에서 이 목록을 추출 하고 싶다.

A. indexOf 메서드를 사용하여 콜론의 위치를 알아낸 후 다시 indexOf 메서드를 사용하여 콜론 다음에 오는 마침표의 위치를 찾습니다. 두개의 위치를 substring 메서드와 함께 사용하면 된다.

 

var sentence = "This is one sentence. This is a sentence with a list of items: cherries, oranges, apples, bananas";

var start = sentence.indexOf(":");

var end   = sentence.indexOf(".",start+1);

 

var list  = sentence.substring(start+1,end);

 

1.6 문자열이 존재하는지 또는 빈 문자열인지 확인하기

Q. 변수가 정의되어 있으며 문자열이 들어 있는지 혹은 비어 있는지 확인 하고 싶다.

A. typeof 연산자, valueOf 메서드, String 객체의 length속성을 사용하면 변수가 정의도어 있으며 문자열이 들어 잇는지 혹은 비어 잇는지 확인하는 조건문을 작성할 수 있습니다.(valueOf 메서드는 모든 자바스크립트 객체가 공유하는 메서드 입니다.)

 

if( ((typeof unknownVariable != "undefined") &&

     (typeof unknownVariable.valueOf() == "string") ) &&

      (unknownVariable.length > 0) ){

      .....

}

 

빈문자열 여부를 확인할때 length 로 할 수 있다. 그러나 변수가 정의 되어 있지 않다면 undefiend 자바스크립트 오류가 발생한다. typeof 연산자를 사용하여 변수를확인 하고 명확히 존재시에 사용한다.

 

number : 변수가 숫자일 때
string : 변수가 문자열일 때
boolean : 변수가 불리언 값일 때
function : 변수가 함수 일때
object : 변수가 null,배열 또는 다른 자바스크립트 객체일 때
undefiend : 변수가 정의되지 않았을 때

 

//변수가 존재하고 길이가 0이상이면 성공

if((typeof unknownVariable !== "undefiend") &&(unknownVariable.length > 0)){

...

}

 

//문자열 길이가 0이상이면 성공

if((typeof unknownVariable == "string") &&(unknownVariable.length > 0)){

...

}

 

 

 

이때 리터럴이 아닌 String 객체라면 또는 다른것이라면 오류가 난다.

valueOf 메서드는 모든 객체의 원시 자료형을 반환한다.

 

1.7 키워드 문자열을 여러개의 키워드로 나누기

Q. 여러개의 키워드를 포함한 문자열이 있고 각 키워드는 쉽표로 구분되어 있다. 문자열을 나누어 키워드 배열로 만들고 키워드 레이블과 함께 키워드를 출력하고 싶다.

A. Sring 객체의 split 메서드를 사용하여 쉼표를 기준으로 문자열을 분리합니다. 분리된 값은배열에 루프를 실행하여 출력한다.

 

 

var keyword   = "a,b,c,d,e,f";

var arrayList = keyword.split(",")   // 콤마로 구분

var arrayList = keyword.split(",",2) // 요소가 2개인 배열

var arrayList = keyword.split(" ")   // 모든 문자열

 

 

for(var i=0 ; i < arrayList.length ; i++){

 alert(arrayList[i]);

}

 

 

1.8 특수 문자 삽입하기

Q.줄 바꿈 문자와 같은 특수 문자를 문자열에 삽입하고 싶다.

A.문자열에서 이스케이프 문자열을 사용하면 된다.

 

 

 

 

이스케이프 문자열
 
의미
 
 \'
 작은 따옴표
 
 \"  큰 따옴표
 \\  백슬래시
 \b  백스페이스

 \f
  폼피드
 \n  줄바꿈
 \r  캐리지 리턴
 \t  가로 탭 
 \ddd
 8진수 문자열(ddd 3자리)
 

 \xddd
  16진수 문자열(dd는 2자리)
 \udddd
 유니코드 문자열 (dddd 4자리 16지수 숫자)
 

 

 

1.9 textarea를 줄별로 처리하기

 

Q. textarea 의 콘텐츠를 줄별로 처리하고 싶다.

A. String 객체의 split 메서드를 줄 바꿈 이스케이프 문자열과 함께 사용하면 textarea의 콘텐츠를 줄별로 분리 할 수 있다.

 

var txtBox = document.getElementById("inputbox");

var lines  = txtBox.value.split("\n");

 

tip : 추출된 라인별 콘텐츠를 html로 보여줄경우 "\n"을 <br/>로 변경하여 보여주면 줄바꿈 된 형태가 된다.

 

1.10 문자열 끝 공백 제거하기

 

Q. 폼요소에서 문자열을 가져올때 양끝의 공백을 제거하고 싶다.

A. ECMAScript 5에서 새롭게 정의된 String 객체의 trim 메서드를 사용하면 된다.

 

 

var txtBox = document.getElementById("inputbox");

var lines  = txtBox.value.split("\n");

var resultString = lines[0].trim();

 

// 정규식을 이용한 방법

if(typeof String.trim == "undefiend"){

  String.prototype.trim = function(){

     return this.replace(/(^\s*)|(\s*)/g," ");

  }

}

 

1.11 문자열 왼쪽 또는 오른쪽에 문자열 채워넣기

 

Q. 문자열을 왼쪽 또는 오른쪽에 주어진 문자를 채워 넣어야 한다.

A. 문자열의 길이를 확인한 후, 주어진 문자열을 필요한 만큼 반복하여 원래 문자열에 덧붙이거나(오른쪽 채워넣기) 원래 문자열 제일 앞에 추가하여(왼쪽 채워넣기) 새로운 문자열을 만든다.

 

var preLen  = 20;

var oldStr = "This is a string";

var diff = preLen - oldStr.length;

var filler = "&nbsp;";

 

for(var i=0 ; i < diff ; i++){

  oldStr = filler + oldStr;

}