18-2 JS 문자열2

 - 문자열이 무엇가, 사용하는 방법, 특수 기호, 문자열 길이, 특정 글자에 접근하기, 문자의 불변성, 대·소문자 변경하기는 18-1 JS 문자열1에 있음.

---

부분 문자열 찾기

 - 문자열에서 부분 문자열을 찾는 방법은 여러 가지가 있다.

 

1. str.indexOf() 

str.indexOf(searchValue, fromIndex) - 공문서

  이 메서드는 문자열 str의 fromIndex에서부터 시작해, 찾고하 하는 부분 문자열(searchValue)이 어디에 위치하는지를 찾아준다. searchValue와 동일한 글자가 없다면 -1을 반환한다.

에시

let str = 'Widget with id';

alert( str.indexOf('Widget') ); // 0, str은 'Widget'으로 시작함
alert( str.indexOf('widget') ); // -1, indexOf는 대·소문자를 따지므로 원하는 문자열을 찾지 못함

alert( str.indexOf("id") ); // 1, "id"는 첫 번째 위치에서 발견됨 (Widget에서 id)

  매개변수 fromIndex는 선택적으로 사용기 가능하다.

  사용 예시

let str = 'Widget with id';

alert( str.indexOf('id', 2) ) // 12

  문자열 내 부분 문자열 전체를 대상으로 무언가를 하고 싶다면 반복문 안에 indexOf를 사용하면 됩니다. 반복문이 하나씩 돌 때마다 검색 시작 위치가 갱신되면서 indexOf가 새롭게 호출됩니다.

let str = 'As sly as a fox, as strong as an ox';

let target = 'as'; // as를 찾아봅시다.

let pos = 0;
while (true) {
  let foundPos = str.indexOf(target, pos);
  if (foundPos == -1) break;

  console.log( `위치: ${foundPos}` );
  pos = foundPos + 1; // 다음 위치를 기준으로 검색을 이어갑니다.
}
/*
위치: 7
위치: 17
위치: 27
*/

  동일한 알고리즘을 사용해 코드만 짧게 줄이면 다음과 같다.

let str = "As sly as a fox, as strong as an ox";
let target = "as";

let pos = -1;
while ((pos = str.indexOf(target, pos + 1)) != -1) {
  console.log( `위치: ${pos}` );
}

  ※ str.lastIndexOf()

 -  유사한 기능을 하는 메서드이며 문자열의 끝에서부터 부분 문자열을 찾는다는 점이 다르다.

 

2. 비트 NOT 연산자를 사용한 기법

 - ~을 사용한 기법으로 피연산자를 32비트 정수로 바꾼 후 모든 비트를 반전합니다. 단 소수부는 모두 버려집니다.

  따라서 n이 32비트 정수일 때 ~n은 -(n+1)가 된다.

예시

console.log(~2); // -3, -(2+1)과 같음
console.log(~1); // -2, -(1+1)과 같음
console.log(~0); // -1, -(0+1)과 같음
console.log(~-1); // 0, -(-1+1)과 같음

   indexOf를 이용해 문자열 안에 부분 문자열이 있는지 찾는 것에 활용이 가능하다.

let str = "Widget";

if (~str.indexOf("Widget")) {
  console.log('찾았다!'); // 0을 제외한 숫자들이 들어가면 참으로 판단하여 값을 출력한다. 
} // 하지만 직관적이지 않아 추천하진 않지만 오래된 스크입트에 있어서 알고는 있어야됨
//밑의 코드와 동일하다.
if (str.indexOf("Widget") != -1) {
    console.log("찾았다!");
}

 

3. includes, startsWith, endsWith

  비교적 근래에 나온 메서드인 str.incIudes(substr, pos)는 str에 부분 문자열 substr이 있는지에 따라 true나 false를 반환한다.

console.log("Widget with id".includes("Widget")); // true
console.log("Hello".includes("Bye")); // false

  str.includes에도 str.indexOf처럼 두 번째 인수를 넘기면 해당 위치부터 부분 문자열을 검색합니다.

console.log("Widget".includes("id")); // true
console.log("Widget".includes("id", 2)); // false, 세 번째 위치 이후엔 "id"가 없습니다.

  메서드 str.startsWith와 str.endsWith는 메서드 이름 그대로 문자열 str이 특정 문자열로 시작하는지(start with) 여부와 특정 문자열로 끝나는지(end with) 여부를 확인할 때 사용할 수 있다.

console.log("Widget".startsWith("Wid")); // true, "Widget"은 "Wid"로 시작합니다.
console.log("Widget".endsWith("get")); // true, "Widget"은 "get"으로 끝납니다.

 

---

 

부분 문자열 추출하기

 - 자바스크립트엔 부분 문자열 추출과 관련된 메서드 substring, substr, slice가 있다.

 

1. str.slice(start [, end])

 - 문자열의 start부터 end까지(end는 미포함)를 반환한다.

예시

let str = "stringify";
console.log(str.slice(0, 5)); // 'strin',
console.log(str.slice(0, 1)); // 's',

  두 번째 인수가 생략된 경우엔, 명사한 위치부터 문자열 끝까지를 반환한다.

let str = "stringify";
console.log(str.slice(2)); // ringify, 2번째부터 끝까지

  start와 end는 음수가 될 수도 있습니다. 음수를 넘기면 문자열 끝에서부터 카운팅을 시작한다.

let str = "stringify";
// 끝에서 4번째부터 시작해 끝에서 1번째 위치까지
console.log(str.slice(-4, -1)); // gif

 

2. str.substring(start [, end]))

 - start와 end 사이에 있는 문자열을 반환합니다. slice와 유사하지만 start가 end보다 커도 괜찮다는 것과 substring은 음수 인수를 허용하지 않아 0으로 처리 한다는 차이가 있다.

let str = "stringify";

// 동일한 부분 문자열을 반환합니다.
console.log(str.substring(2, 6) ); // "ring"
console.log(str.substring(6, 2) ); // "ring"

// slice를 사용하면 결과가 다릅니다.
console.log(str.slice(6, 2)); // "" (빈 문자열)

 

3. str.substr(start [, length])

 - start에서부터 시작해 length 개의 글자를 반환한다. 첫 인자가 음수면 뒤에서 부터 측정한다.

위의 두 메서드와의 차이는 substr은 끝 위치 대신에 길이를 기준으로 문자열을 추출한다는 것이다.

let str = "stringify";
console.log(str.substr(2, 4)); // ring, 두 번째부터 글자 네 개
console.log(str.substr(-4, 2)); // gi, 끝에서 네 번째 위치부터 글자 두 개

 

 

공부한 곳!! 모던 JavaScript 튜터리얼

바로가기!!

※ 문자열 내용 길어 2에서 계속 18 JS 문자열2