320x100
320x100

문자열 (String)

: 자바스크립트에는 글자 하나만 저장할 수 있는 Char형 자료형이 없음

: 텍스트는 길이에 상관없이 문자열 형태로 저장

 

- 문자열을 구성하는 따옴표

: 작은 따옴표 ( ' ) / 큰 따옴표 ( " ) => 기능상 차이가 없음

: 벡틱 ( ` ) => ${...}을 통해 변수를 문자열 내부에 선언 가능

 > 리터럴 방식

: 벡틱을 사용하면 여러 줄에 걸쳐 작성 할 수 있음

: 벡틱은 템플릿 함수에서도 활용가능

let guestList = `손님:
 * John
 * Pete
 * Mary
`;

alert(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함


let guestList = "손님: // Error: Invalid or unexpected token
  * John";

 

- 태그드 템플릿

: 백틱은 '템플릿 함수(template function)'에서도 사용됨

: func`string` 같이 첫 번째 백틱 바로 앞에 함수 이름(func)을 써주면,

  이 함수는 백틱 안의 문자열 조각이나 표현식 평가 결과를 인수로 받아 자동으로 호출됨

: 태그드 템플릿을 사용하면 사용자 지정 템플릿에 맞는 문자열을 쉽게 만들 수 있음

: 이 기능은 자주 사용되진 않음

 

 

 

 

특수기호

: \n을 사용하면 작은 따옴표나 큰 따옴표로도 줄바꿈 가능

 

- 자바스크립트의 특수기호들 

 

- 유니코드를 활용한 예시

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

 

- 역슬래시

: 문자열 내에 따옴표를 넣는 등의 이스케이프가 필요할 때 \를 문자 앞에 사용

: 벡틱을 이용하면 따옴표를 문자안에 우아하게 사용 가능

 

 

 

.length

: 문자열의 길이 출력

: length는 함수가 아닌 프로퍼티

 

 

 

특정 글자에 접근하기

- charAt(index)

: 근래에는 대괄호 []를 이용하여 인덱스에 접근

: 하위 호환을 위해 있는 문법

let str = `Hello`;

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

 

 

 

문자열의 불변성

: 문자열은 중간 글자를 수정할 수 없음

: 이 문제를 해결하기 위해서는 다른 변수를 생성한 뒤 할당해야함

let str = 'Hi';

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

alert( str ); // hi

 

 

 

문자열 대소문자 변경하기

- toUpperCase()

: 대문자로 변경

 

- toLowerCase()

: 소문자로 변경

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

alert( 'Interface'[0].toLowerCase() ); // 'i'

 

 

 

 

부분 문자열 찾기

- indexOf(subStr, position)

: str의 postion 부터 시작해 subStr의 인덱스를 반환

: position이 3일 경우 subStr이 등장하는 세 번째 인덱스를 반환 

: 원하는 문자가 없을 경우 -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)


let str = 'Widget with id';

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

 

- 부분 문자열 전체에서 찾기

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) {
  alert( `위치: ${pos}` );
}

 

- lastIndexOf(subStr, position)

: 문자열 끝부분에서 부터 인덱스를 찾는 함수

let str = "Widget with id";

if (str.indexOf("Widget") != -1) {
    alert("찾았다!"); // 의도한 대로 동작합니다.
}

 

 

 

 

 

비트 NOT 연산자를 사용한 문자열 찾기

: 비트 NOT 연산자는 피연산자를 32비트 정수로 변환한 후 모든 비트를 반전 (소수는 버려짐)

: n이 32비트 정수일 때 ~n은 -(n+1)이 됨

alert( ~2 ); // -3, -(2+1)과 같음
alert( ~1 ); // -2, -(1+1)과 같음
alert( ~0 ); // -1, -(0+1)과 같음
alert( ~-1 ); // 0, -(-1+1)과 같음

 

- 문자열 찾기에 응용하기

: 오래된 자바스크립트에서 활용

let str = "Widget";

if (~str.indexOf("Widget")) {
  alert( '찾았다!' ); // 의도한 대로 동작합니다.
}

 

 

 

 

 

문자열 포함 여부 확인

- includes(subStr, position)

: 문자열의 위치 정보는 필요하지 않고 포함 여부만 확인할 때 사용

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

alert( "Hello".includes("Bye") ); // false

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

 

- startsWiths(str)

: 문자열이 특정 문자열로 시작하는지 확인

 

- endsWith(str)

: 문자열이 특정 문자열로 끝나는지 확인

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

 

 

 

 

부분 문자열 추출하기

- slice(start, [,end])

: start 부터 end까지 (end는 미포함) 반환

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

: start와 end가 음수일 경우 문자열 끝에서 부터 카운팅

let str = "stringify";
alert( str.slice(0, 5) ); // 'strin', 0번째부터 5번째 위치까지(5번째 위치의 글자는 포함하지 않음)
alert( str.slice(0, 1) ); // 's', 0번째부터 1번째 위치까지(1번째 위치의 자는 포함하지 않음)

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

let str = "stringify";

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

 

- substr(start, [,end])

: start와 end 사이의 문자열 반환

: start가 end 보다 커도 됨

: 음수 인수를 허용하지 않음 (음수는 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) ); // "" (빈 문자열)

 

- substr(start, [, length])

: start 부터 length개의 문자 반환

: 첫 번째 인수가 음수면 뒤에서 부터 카운팅

let str = "stringify";
alert( str.substr(2, 4) ); // ring, 두 번째부터 글자 네 개

 

 

 

문자열 반환 요약

: 최신 자바스크립트에서는 slice를 주로 사용하는 것을 추천

 

 

 

 

문자열 비교하기

: 대문자는 소문자 보다 크다

: 발음 구별 기호 (diacritical mark)가 붙은 문자는 알파벳 순서 기준을 따르지 않음

alert( 'Österreich' > 'Zealand' ); // true (Österreich는 오스트리아를 독일어로 표기한 것임 - 옮긴이)

 

- codePointAt(position)

: 해당 인덱스의 글자의 코드를 반환

// 글자는 같지만 케이스는 다르므로 반환되는 코드가 다릅니다.
alert( "z".codePointAt(0) ); // 122
alert( "Z".codePointAt(0) ); // 90

 

- fromCodePoint(code)

: 숫자형식의 코드에 대응하는 문자를 반환

alert( String.fromCodePoint(90) ); // Z

// 90을 16진수로 변환하면 5a입니다.
alert( '\u005a' ); // Z

let str = '';

for (let i = 65; i <= 220; i++) {
  str += String.fromCodePoint(i);
}
alert( str );
// ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~€‚ƒ„
// ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜ

 

 

 

문자열을 제대로 비교하기

- ECMA-402

: 대부분의 모던 브라우저에서 지원하는 국제 표준 문자열

: ie10에서는 intl.js 가 필요

 

-  localeCompare(str)

: ECMA에서 정의한 표준 문자열 비교 메서드

: str이 크면 음수 반환

: str이 작으면 양수 반환

: 같으면 0 반환

alert( 'Österreich'.localeCompare('Zealand') ); // -1

 

 

 

서로게이트 쌍 (surrogate pair)

: 유럽권 언어에서 사용되는 글자, 숫자, 상형문자를 인코딩한 기호

alert( '𝒳'.length ); // 2, 수학에서 쓰이는 대문자 X(그리스 문자 카이 - 옮긴이)
alert( '😂'.length ); // 2, 웃으면서 눈물 흘리는 얼굴을 나타내는 이모티콘
alert( '𩷶'.length ); // 2, 사용 빈도가 낮은 중국어(상형문자)

 

 

 

유니코드 정규화

alert( "S\u0307\u0323".normalize() == "S\u0323\u0307".normalize() ); // true


alert( "S\u0307\u0323".normalize().length ); // 1

alert( "S\u0307\u0323".normalize() == "\u1e68" ); // true

 

 

 

 

 

 

Refference

https://ko.javascript.info/string

 

300x250
728x90