문자열 (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
'Programming > JavaScript' 카테고리의 다른 글
모던 자바스크립트 (자료구조와 자료형) 3-6. Date 객체와 날짜 (0) | 2022.04.03 |
---|---|
모던 자바스크립트 (자료구조와 자료형) 3-5. 맵(map)과 셋(set) (0) | 2022.04.03 |
모던 자바스크립트 (자료구조와 자료형) 3-3. iterable 객체 / 구조 분해 할당 (0) | 2022.04.02 |
모던 자바스크립트 (자료구조와 자료형) 3-2. 객체의 순환과 숫자형 (0) | 2022.03.31 |
모던 자바스크립트 (자료구조와 자료형) 3-1. 원시 값 활용과 배열 관련 메서드 (0) | 2022.03.30 |