surf core js : 유용한 메서드와 내장 함수 - string

Dino_·2021년 8월 13일
0

surf javascript

목록 보기
20/28
post-thumbnail

length

length 프로퍼티엔 문자열의 길이가 저장된다.

alert( `My\n`.length ); // 3
// \n은 ‘특수 문자’ 하나로 취급되기 때문에 My\n의 길이는 3

length는 프로퍼티이다.

charAt(pos), [pos]

문자열 내 특정 위치인 pos에 있는 글자에 접근하려면 [pos]같이 대괄호를 이용하거나 str.charAt(pos)라는 메서드를 호출하면 된다.

위치는 0부터 시작한다.

let str = `Hello`;

// 첫 번째 글자
alert( str[0] ); // H
alert( str.charAt(0) ); // H

// 마지막 글자
alert( str[str.length - 1] ); // o

근래에는 대괄호를 이용하는 방식을 사용한다. charAt은 하위 호환성을 위해 남아있는 메서드라고 생각하면 된다.

두 접근 방식의 차이

두 접근 방식의 차이는 반환할 글자가 없을 때 드러난다.

접근하려는 위치에 글자가 없는 경우

  • []는 undefined
  • charAt은 빈 문자열을 반환.
let str = `Hello`;

alert( str[1000] ); // undefined
alert( str.charAt(1000) ); // '' (빈 문자열)

문자열의 불변성

문자열은 수정할 수 없다.

let str = 'Hi';

str[0] = 'e';

console.log(str) //'Hi'

이런 문제를 피하려면 완전히 새로운 문자열을 하나 만든 다음, 이 문자열을 str에 할당하면 된다.

let str = 'Hi';

str = 'h' + str[1]; // 문자열 전체를 교체함

alert( str ); // hi

toLowerCase() / toUpperCase()

소문자 / 대문자로 치환한 문자열을 반환한다.

alert( 'Interface'.toUpperCase() ); // INTERFACE
alert( 'Interface'.toLowerCase() ); // interface

글자 하나의 케이스만 변경하는 것도 가능하다.

부분 문자열 찾기

str.indexOf(substr, pos)

이 메서드는 문자열 str의 pos에서부터 시작해, 부분 문자열 substr이 어디에 위치하는지를 찾아준다.

원하는 부분 문자열을 찾으면 위치(idx)를 반환하고 그렇지 않으면 -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)

str.indexOf(substr, pos)의 두 번째 매개변수 pos는 선택적으로 사용할 수 있는데, 이를 명시하면 검색이 해당 위치(idx)부터 시작된다.

str.lastIndexOf(substr, pos)

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

반환되는 부분 문자열 위치는 문자열 끝이 기준이다. 문자열 시작이 기준이다.

모던 자바스크립트에선 search 메서드로 부분 문자열의 시작 위치를 찾는다.

search, includes, startsWith, endsWith

indexOf가 한물간 사이 search(substr | RegExp ) 를 사용하는데, 문자열 substr 혹은 정규표현식에 해당하는 문자열의 시작 위치를 반환한다.

str.includes(substr, pos)는 str에 부분 문자열 substr이 있는지에 따라 true나 false를 반환한다.

부분 문자열의 위치 정보는 필요하지 않고 포함 여부만 알고 싶을 때 적합한 메서드이다.

alert( "Widget with id".includes("Widget") ); // true

alert( "Hello".includes("Bye") ); // false
str.includes에도 str.indexOf처럼 두 번째 인수를 넘기면 해당 위치부터 부분 문자열을 검색합니다.

alert( "Widget".includes("id") ); // true
alert( "Widget".includes("id", 3) ); // false, 세 번째 위치 이후엔 "id"가 없다.

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

alert( "Widget".startsWith("Wid") ); // true, "Widget"은 "Wid"로 시작한다.
alert( "Widget".endsWith("get") ); // true, "Widget"은 "get"으로 끝난다..

부분 문자열 추출하기

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

splice를 혼동하지마라 array 사용되는 메소드다.

str.slice(start [, end])

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

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', 0번째부터 5번째 위치까지(5번째 위치의 글자는 포함하지 않음)
alert( str.slice(0, 1) ); // 's', 0번째부터 1번째 위치까지(1번째 위치의 자는 포함하지 않음)
alert( str.slice(1) ); // 'tringify, 두 번째 인수 없으면 문자열 끝까지

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

let str = "stringify";

// 끝에서 4번째부터 시작해 끝에서 1번째 위치까지
alert( str.slice(-4, -1) ); // gif

str.substring(start [, end])

start와 end 사이에 있는 문자열을 반환합니다. (end 미포함)

substring은 slice와 아주 유사하지만 start가 end보다 커도 괜찮다는 데 차이가 있다.

let str = "stringify";

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

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

//substring은 음수 인수를 허용하지 않습니다. 음수는 0으로 처리됩니다.

str.substr(start [, length])

start에서부터 시작해 length 개의 글자를 반환한다.

substr은 끝 위치 대신에 길이를 기준으로 문자열을 추출한다는 점에서 substring과 slice와 차이가 있다.

let str = "stringify";
alert( str.substr(2, 4) ); // ring, 두 번째부터 글자 네 개
첫 번째 인수가 음수면 뒤에서부터 개수를 셉니다.

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

어떤 메서드를 선택해야 하나요?

모두 사용해도 괜찮다. 하지만 substr에는 단점이 하나 있다. substr 구식 스크립트에 대응하기 위해 남겨 둔 브라우저 전용 기능들을 명시해 놓은 부록 B(Annex B)에 정의되어 있다. 거의 모든 곳에서 이 메서드가 동작하긴 하지만 브라우저 이외의 호스트 환경에서는 제대로 동작하지 않을 수 있다.

Reference

profile
호기심 많은 청년

0개의 댓글