JavaScript 첫걸음 ~ 문자열 제대로 다루기

Strings as objects

• 자바스크립트의 모든 것은 객체다.
• 변수가 문자열 객체 인스턴스되면, 수많은 속성과 메서드를 사용할 수 있다.
  String 객체 페이지에서 목록 확인.

• 문자열 길이 찾기
  • length 프로퍼티를 사용할 수 있다.
    var browserType = 'zin0';
    browserType.length;
    • 결과는 4를 리턴한다.

• 특정 문자열 찾기
  • 대괄호 표기법을 이용해서 문자열 안의 문자를 구할 수 있다.

    browserType[0];
    browserType[browserType.length-1];

    • z와 0이 리턴된다.

• 문자열 내부의 하위 문자열 찾기 및 추출
  • 큰 문자열 안의 작은 문자열(하위 문자열)을 찾고 싶을 때, indexOf()를 사용해서 찾을 수 있다.

    browserType.indexOf('zin');

    • 결과는 0을 리턴한다.
      • 하위 문자열이 시작하는 위치 0을 리턴
    • 문자열에 없는 하위 문자열을 찾는 경우에는 -1을 리턴한다

      browserType.indexOf('LaLaLa');

    • 위의 특성을 이용해서, 아래와 같이 작성할 수 있음

      if(browserType.indexOf('zin') !== -1) {
          // do stuff with the string
      }

  • 문자열 내에서 부분 문자열이 어디에서 시작되고 어떤 문자로 끝나는지 알고 싶으면, slice()를 사용하여 문자열을 추출할 수 있다.

    browserType.slice(0,3);

    • "zin"을 반환한다. 첫 번째 파라메터는 추출을 시작할 인덱스의 위치이고, 두 번째 파라메터는 추출할 문자의 갯수다. 따라서, 0 부터 3글자를 따온다.
      browserType.slice(2);
    • "n0"을 반환한다. 파라메터가 하나인 경우, 파라메터는 시작점이 되어 나머지 문자 모두를 가져온다.

• 대/소문자 변경

  var radData = 'My NaMe Is MuD';
  radData.toLowerCase();
  radData.toUpperCase();

  • .toLowerCase() 와 .toUpperCase()로 소문자 / 대문자로 만든다.

• 문자열의 일부를 변경하기
  • replace()를 통해 하위 문자열을 바꿀 수 있다.

    browserType.replace('moz','van');

    • 처음으로 발견된 'moz'에 대해서 'van'으로 바꿔준다.
  • 정규식과 replace()를 함께 이용해서, replaceAll 처럼 사용하기

    var tmp = "abcabcABC";
    tmp.replace("abc","ttt"); // 이 경우에는 "tttabcABC"가 된다.
    tmp.replace(/abc/g, "ttt"); // 이 경우에는 "ttttttABC"가 된다.
    tmp.replace(/abc/gi, "ttt"); // 이 경우도 "ttttttttt"가 된다.

    • 변경하고 싶은 문자를 슬래쉬 사이에 넣는다. / 문자 /
    • g와 gi의 차이
      • g는 발생한 모든 패턴에 대한 전역 검색
      • i는 패턴을 찾을 때, 대/소문자 구분을 안함

---

Active learning examples

• 여기에서 위의 제목 하위에 있는 문제들 풀어보기

  var list = document.querySelector('.output ul');
  list.innerHTML = '';
  var greetings = ['Happy Birthday!',
                   'Merry Christmas my love',
                   'A happy Christmas to all the family',
                   'You\'re all I want for Christmas',
                   'Get well soon'];
  
  for (var i = 0; i < greetings.length; i++) {
    var input = greetings[i];
  
    if (greetings[i].indexOf('Christmas') !==-1) {
      var result = input;
      var listItem = document.createElement('li');
      listItem.textContent = result;
      list.appendChild(listItem);
    }
  }
  var list = document.querySelector('.output ul');
  list.innerHTML = '';
  var cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL'];
  for(var i = 0; i < cities.length; i++) {
    var input = cities[i];
    // write your code just below here

    var lowerCase = input.toLowerCase().slice(1);
    var firstLetter = input.slice(0,1).toUpperCase();
    var result = firstLetter+lowerCase;

    var listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }
  var list = document.querySelector('.output ul');
  list.innerHTML = '';
  var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                  'GNF576746573fhdg4737dh4;Greenfield',
                  'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street',
                  'SYB4f65hf75f736463;Stalybridge',
                  'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];

  for (var i = 0; i < stations.length; i++) {
    var input = stations[i];
    // write your code just below here   

    var result = input.replace(/[0-9]/g,"").replace(/[a-z]*;/,": ");
    var listItem = document.createElement('li');
    listItem.textContent = result;
    list.appendChild(listItem);
  }

• 정규식 확인하기