B22 : 문자열 심화

목차

1. 문자열

    1-1. 따옴표의 종료

    1-2. 특수 기호

    1-3. length : 문자열 길이

    1-4. 특정 글자에 접근하기

    1-5. toLowerCase(), toUpperCase()

    1-6. 부분 문자열 찾기 : str.indexOf(substr, pos), includes, startsWith, endsWith

    1-7. 부분 문자열 추출 : substring, substr, slice

---

1. 문자열

1. 따옴표의 종류

문자열은 작은따옴표, 큰따옴표, 백틱으로 감쌀 수 있다.

작은따옴표와 큰따옴표의 기능상 차이는 없다.

 

하지만 백틱은 기능이 몇 개 있다.

• 중간에 ${표현식} : 템플릿 리터럴 (template literal) 삽입 가능
• 문자열을 여러 줄로 작성 가능
• 템플릿 함수(template function)에서 사용 가능
  → func`string`과 같이 백틱 바로 앞에 함수명을 써주면, 이 함수는 백틱 내 문자열 조각/표현식 평가 결과를 인수로 받아 자동으로 호출됨 (tagged template)
  자주 사용되지는 않는 기능이다

2. 특수 기호

백슬래시(\)를 활용해서 특수 문자를 문자열 사이에 넣을 수 있다.

특수 문자	설명
\n	줄바꿈
\r	캐리지 리턴( 캐리지 리턴과 줄바꿈 문자를 조합해 줄을 바꿈)
\', \"	따옴표
\\	역슬래시
\t	탭
\b, \f, \v	백스페이스, 폼피드, 세로 탭 (요즘엔 거의 사용하지 않음)
\xXX	16진수 유니코드 (z = \x7A)
\uXXXX	UTF-16 인코딩 규칙을 사용하는 16진수 코드 XXXX로 표현한 유니코드 기호  e.g. \u00A9는 저작권 기호©의 유니코드이다
\u{X...XXXXXX} (₩~6개 사이의 16진수 글자)	UTF-32로 표현한 유니코드 기호로, 몇몇 특수한 글자는 두 개의 유니코드 기호를 사용해 인코딩 되어 4바이트를 차지함

 

alert( "\u00A9" ); // ©
alert( "\u{20331}" ); // 佫, 중국어(긴 유니코드)
alert( "\u{1F60D}" ); // 😍, 웃는 얼굴 기호(긴 유니코드)

 

3. length : 문자열 길이

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

alert( `My\n`.length ); // 3 (\n은 문자열 하나로 취급됨)

 

 

4. 특정 글자에 접근하기

문자열 내 특정 위취의 글자에 접근하려면 대괄호 / str.charAt(pos)를 이용한다.

보통 대괄호를 이용하며, charAt은 호환성을 위해 남아있는 메서드이다.

접근하려는 위치에 글자가 없는 경우, []는 undefined를, charAt은 빈 문자열을 반환한다.

let str = `Hello`;

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

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

 

 

5. toLowerCase(), toUpperCase()

대문자를 소문자로, 소문자를 대문자로 변경시킨다.

alert( 'ABC'.toLowerCase() );	// abc
alert( 'abc'.toUpperCase() );	// ABC

alert( 'Abc'[0].toLowerCase() );	// abc (한 개만 변경도 가능하다

 

6. 부분 문자열 찾기 : str.indexOf(substr, pos), includes, startsWith, endsWith

str.indexOf(substr, pos)

문자열 str의 pos부터 시작해 부분 문자열 substr이 어디에 위치하는지 찾아낸다.

원하는 문자열을 찾으면 그 위치를 반환하고, 아니면 -1을 반환한다.

let str = 'Widget with id';

alert( str.indexOf('Widget') );	// 0, str은 'Widget'으로 시작
alert( str.indexOf("id") );	// 1, "id"는 첫번째 위치에서 발견 W"id"get
alert( str.indexOf("id", 2) );	// 12

 

str.includes(substr, pos)

str에 부분 문자열 substr이 있다면 true, 없다면 false를 반환한다.

위치 정보는 필요없고, 포함 여부만 알고 싶을 때 사용하기 좋다.

 

두번째 인수 pos를 넘기면 해당 위치부터 검색한다.

 

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

alert( "Widget".includes("id") ); // true
alert( "Widget".includes("id", 3) ); // false

 

str.startsWith, str.endsWidth

문자열 str이 특정 문자열로 시작하는지, 끝나는지 여부를 확인한다.

alert( "Widget".startsWith("Wid") ); // true
alert( "Widget".endsWith("get") ); // true

 

7. 부분 문자열 추출 : substring, substr, slice

str.slice(start [, end])

문자열의 start부터 end까지를 반환한다.

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

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', 0번째부터 5번째 - 1 위치까지
alert( str.slice(0, 1) ); // 's', 0번째부터 1번째 - 1 위치까지

• 인자로 음수를 넣을 수도 있다. 음수를 넘기면 문자열 뒷부분부터 카운팅을 시작한다.
  alert( str.slice(-4, -1) ); // gif

 

str.substring(start [, end])

start와 end 사이의 문자열을 반환한다.

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

그리고 substring은 음수를 허용하지 않는다. (0으로 처리됨)

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) ); // "" (빈 문자열)

 

 

str.substr(start [, length])

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

끝 위치가 아닌 길이를 기준으로 문자열을 추출한다는 점에서 위의 두 메서드와 차이가 있다.

let str = "stringify";
alert( str.substr(2, 4) );	// ring, 2~4개

let str = "stringify";
alert( str.substr(-4, 2) );	// gi (뒤에서부터 4번째 위치로부터 2개)

 

 

 

 

참고

https://ko.javascript.info/string

문자열