[Do it! 모던 자바스크립트 프로그래밍의 정석] 10. 문자열과 배열

10. 문자열과 배열

문자열에 접근하기

원시 유형에서 메서드 사용하기

• 자료형 중 단순히 값만 가지고 있을 때 -> 원시 유형(primitive type)
• 원시 유형에서도 프로퍼티와 메서드를 사용할 수 있음
  • ex. `str.length`
• 숫자형과 논리형, 문자열 유형: 별도의 객체가 만들어져 있음
  • Number, Boolean, String 객체: 래퍼 객체

오토박싱(autoboxing)

• number, boolean, string 같은 원시 유형에서 프로퍼티나 메서드 사용 -> 일시적으로 원시 유형을 해당 객체로 변환
• 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라짐
• 필요할 때만 임시로 객체로 바꿔 사용하고, 사용이 끝나면 다시 원시 유형으로 되돌아옴

---

length - 문자열의 길이

// 기본형
문자열.length

// ex
let str = "Good morning!";
let greeting = "안녕하세요?"
str.length // 13
greeting.length // 6

charAt() - 특정 위치의 문자에 접근하기

• 방법 1. 대괄호 사용(ES6 이후)
• 방법 2. `charAt()` 메서드 사용

// 기본형
문자열.chartAt(위치)

// ex.
str = "Good morning!";
str.charAt(3) // "d"
str[5] // "m"

---

indexOf() - 부분 문자열의 위치 찾기

두 개 이상의 단어로 구성된 문자열에는 공백으로 구분되는 여러 개의 부분 문자열이 있을 수 있음

괄호 안의 문자열이 나타난 위치를 알려 줌/ 찾는 문자열 X -> -1 반환

// 기본형
indexOf(문자열)
indexOf(문자열, 위치)

ex. str1라는 문자열에서 부분 문자열 위치 찾기
str1 = "Good morning, everyone. Beautiful morning."
str.indexOf("morning") // 5
str.indexOf("evening") // -1

first = str1.indexOf("morning") // 5
str1.indexOf("morning", first+1) // 두 번째 morning의 위치

startsWith() - 특정 문자(열)로 시작하는지 확인

• 문자열이 특정 문자나 문자열로 시작하는지 확인
• 문자나 문자열에서 영문자의 대소문자 구별

// 기본형
문자열.startsWith(문자 or 문자열)

str2 = "Hello, everyone."
str2.startsWith("Hello") // true
str2.startsWith("hello") // false
str2.startsWith("He") // true
str2.startsWith("Hello, ev") // true

endsWith()  - 특정 문자(열)로 끝나는지 확인

• 문자열이 특정 문자나 문자열로 끝났는지 확인
• 문자나 문자열에서 영문자의 대소문자 구별
• 문자열과 함께 길이를 지정할 수 있음

// 기본형
문자열.endsWith(문자 or 문자열)
문자열.endsWith(문자 or 문자열, 길이)

str2 = "Hello, everyone."
str2.endsWith("everyone") // true
str2.endsWith("Everyone") // false
str2.endsWith("one") // true
str2.endsWith("lo, everyone") // true

str2 = "Hello, everyone."
str2.endsWith("one", 15) // true
str2.endsWith("lo", 5) // true, 문자열 길이 5 -> Hello

includes() -  특정 문자(열)이 있는지 확인

• 문자열이 특정 문자나 문자열이 있는지 확인
• 문자나 문자열에서 영문자의 대소문자 구별

// 기본형
문자열.includes(문자 or 문자열)

// ES6 이전: indexOf() 
str2.indexOf("every") ! == -1 // true

// ES6 이후: includes()
str2.includes("every") // true

---

문자열에서 공백 제거하기

공백: [Spacebar]를 눌러 입력한 공백, [Tab]을 눌러 입력한 탭, 줄을 바꾸기 위해 사용한 이스케이프 문자(\n, \r) 등

문자열을 연산에 사용하려면 불필요한 공백을 제거하는 것이 좋음

// 기본형
문자열.trim() // 문자열의 앞뒤 공백 제거
문자열.trimStart() // 문자열의 앞쪽 공백 제거
문자열.trimEnd() // 문자열의 뒤쪽 공백 제거

str3 = " ab cd ef "
str3.trim() // 'ab cd ef'
str3.trimStart() // 'ab cd ef '
str3.trimEnd() // ' ab cd ef'

문자열의 대소문자 바꾸기

영문자 문자열의 경우에는 문자열을 모두 대문자 or 소문자로 바꿀 수 있음

// 기본형
문자열.toUpperCase() // 문자열 모두 대문자 변환
문자열.toLowerCase() // 문자열 모두 소문자 변환

str4 = "Good morning."
str4.toUpperCase() // ;GOOD MORNING.'
str4.toLowerCase() // 'good morning.'

---

substring() - 문자열의 부분 문자열 추출하기

• 시작 위치 ~ 끝 위치의 직전까지 추출해서 반환
  • 끝 위치 지정 X -> 시작 위치 ~ 문자열 끝까지 추출해서 반환

// 기본형
문자열.substring(시작 위치)
문자열.substring(시작 위치, 끝 위치)

// ex.
str4.substring(5) // 'morning.'
str4.substring(0, 4) // 'Good'

slice() - 문자열의 부분 문자열 추출하기

• 시작 위치 ~ 끝 위치의 직전까지 추출해서 반환
  • 끝 위치 지정 X -> 시작 위치 ~ 문자열 끝까지 추출해서 반환
• 음수 사용해 위치 지정할 수 있음
  • 음수 지정 -> 문자열의 끝에서부터 위치 찾음 => 문자열을 뒤에서부터 자를 때 편리

// 기본형
문자열.slice(시작 위치)
문자열.slice(시작 위치, 끝 위치)

// ex.
str4.slice(-5, 12) // "ning"

split() - 구분자를 사용해 문자 쪼개기

문자열에서 구분자를 기준으로 문자열을 나눔

// 기본형
문자열.split(구분자)

// ex.
str5 = "Hello everyone"
array1 = str5.split(" ") // ["Hello", "everyone"]
// 따옴표 사이에 공백 X
array2 = str.split("") // ["H", "e", "l", "l", "o", "", "e" ...]

---

정규 표현식으로 문자열 다루기

정규 표현식

• 특정 패턴(규칙)을 사용해 문자열을 표현하는 언어
• ex. 온라인 쇼핑몰에서 물건을 주문할 때 입력한 전화번호가 숫자로만 되어 있는지 체크할 수 있고,
  'xxxxxxx-xxxx'와 같은 패턴으로 이뤄져 있는지 체크할 수도 있음
• 문자열을 검색하거나 문자열에서 특정 문자를 치환할 때도 복잡한 조건문 없이 정규 표현식을 사용하면 편리
• `RegExp` 객체 사용 or 슬래시(/) 사용해 표현식으로 작성
• '패턴'과 '플래그'로 구성
  • 패턴과 플래그 사이에는 공백 X
  • 플래그는 옵션

// 기본형
패턴[플래그]

// ex. 세 자리 숫자인지 체크하는 정규 표현식
let regexp = /\d{3}/
regexp.test("Hello") // false
regexp.test("123")

---

정규 표현식과 메서드

`RegExp` 객체의 메서드

정규 표현식	기능
정규식.test(문자열)	정규 표현식에 일치하는 부분 문자열 O: true/ X: false
정규식.exec(문자열)	정규 표현식에 일치하는 부분 문자열 O: 결괏값 -> 배열 형태 /X: null 반환

 

문자열 메서드 중 정규 표현식과 함께 사용하는 메서드

문자열 메서드	기능
match(정규식)	문자열에서 정규 표현식에 일치하는 부분 찾음
replace(정규식, 바꿀 문자열)	문자열에서 정규 표현식에 맞는 부분 문자열 찾아 새로운 문자열로 바꿈

let str = "ES2015 is powerful!"
str.match(/ES6/) // null

---

정규 표현식의 플래그

`test()` 메서드: 정규 표현식 조건에 맞는 문자열이 있는지 체크

플래그: 문자열을 검색할 때 사용하는 옵션과 비슷

플래그	기능
i	영문자의 대소문자를 구별하지 X 검색
g	패턴과 일치하는 것을 모두 찾음 g 패턴이 없으면 일치하는 패턴 중 첫 번째 패턴만 반환
m	문자열의 행이 바뀌어도 검색

let str = "ES2015 is powerful!"
/es/.test(str) // false
/es/.test(str) // true

---

정규 표현식의 문자 클래스

문자 클래스를 사용하면 문자인지, 숫자인지, 공백 등을 체크할 수 있음

클래스의 종류	기호	설명
숫자(digit) 클래스	\d	0 ~ 9 사이의 숫자
	\D	숫자가 아닌 모든 문자
공백(space) 클래스	\s	공백, 탭(\t), 줄 바꿈(\n) 등
	\S	공백이 아닌 모든 문자
단어(word) 클래스	\w	단어에 들어가는문자, 숫자와 밑줄 포함
	\W	단어에 들어가지 않는 모든 문자

let str = "ES2015 is powerful!"

// /ES\d/: ES라는 문자 뒤에 오는 하나의 숫자만 찾음
str.match(/ES\d/)

// /ES\d\d\d\d/: ES 문자 뒤에 숫자 4개까지
str.match(/ES\d\d\d\d/)

---

문자열의 시작과 끝 체크하기

문자열의 시작과 끝 부분을 체크할 때는 ^ 기호와 $ 기호 사용

let hello = "Hello, everyone."
/^H/.test(hello) // true. H로 시작하는지 체크
/^h/.test(hello) // false. h로 시작하는지 체크

let hello = "Hello, everyone."
/one.$/.test(hello) // true. one.으로 끝나는지 체크
/e.$/.test(hello) // ture. e.로 끝나는지 체크
/one$/.test(hello) // false. one으로 끝나는지 체크

 

[] 안에 ^ 기호가 있다면 NOT을 의미

// 숫자가 아닌 것을 체크
"ES2015".match(/^0-9/g) // ["E", "S"]

---

반복 검색하기

{} 기호: 반복해서 체크하라고 알려주는 기호

반복 횟수 지정 or 최소 반복 횟수, 최대 반복 횟수 지정할 수 있음

표현식	기능
패턴{n}	패턴이 n번 반복되는 것 찾음
패턴{n,}	패턴이 최소 n번 이상 반복되는 것 찾음
패턴{m,n}	패턴이 최소 m번 이상, 최대 n번 이하로 반복되는 것을 찾음

let str = "Oooops"
str.match(/o{2}/) // 'oo'. 2번 반복되는 것
str.match(/o{2,}/) // 'ooo' 2번 이상 반복되는 것
str.match(/o{2,4}/i) // 'Oooo'. 대소문자 구별 없이 o가 2번 이상, 4번 이하로 반복되는 것

---

출처

Do it! 모던 자바스크립트 프로그래밍의 정석