문자열 메서드

Hi, There!
안녕하세요, 바오밥입니다.

개요

코드 작성 시 많이 사용되는 문자열 메서드를 정리하였습니다.

본문

', ", `의 사용 용도

' 은 " 을 표현할 때 사용됩니다. 특히 HTML 코드를 표현할 때는 ' 를 사용하여 감싸는 것이 편리합니다.

" 은 ' 을 표현할 때 사용됩니다. 특히 영어 문장을 표현할 때 " 를 사용하여 감싸는 것이 편리합니다.

let html = '<div class="box_title">제목 영역</title>'
let desc = "It's 3 o'clock!"

` 은 ${} 를 통해 변수를 표현하거나 수식 계산이 필요할 때 사용합니다.

let name = 'Mike';
console.log(`안녕하세요, ${name}님`) // "안녕하세요, Mike님"
console.log(`1+1은 ${1+1}입니다.`) // "1+1은 2입니다."

여러 줄을 표현할 때도 `을 사용합니다. ' 또는 " 도 표현은 가능하지만 \n 을 사용해야 합니다.

const desc1 = "화창한 \n 하루"
const desc2 = '화창한 \n 하루'
const desc3 = `화창한
하루`

문자열 관련 메서드

문자열의 길이와 특정 위치 접근 - length & 인덱스

문자열의 길이를 알고 싶을 때는 length를 사용하면 됩니다.

const desc1 = "화창한 하루"
console.log(desc1.length) // 6

알아낸 문자열 길이를 이용하여 배열처럼 인덱스로 특정 위치에 접근할 수 있습니다.

const desc1 = "화창한 하루"
console.log(desc1.length) // 6
console.log(desc1[0]) // "화"

그러나 배열처럼 인덱스에 접근하여 수정하는 것은 할 수 없습니다.

const desc1 = "화창한 하루"
console.log(desc1.length) // 6
desc1[0] = "안"
console.log(desc1[0]) // "화", 안으로 수정되지 않습니다.

문자열 대/소문자 변환 - toUpperCase() & toLowerCase()

메서드를 통해 문자열 전체를 대/소문자를 변환할 수 있습니다.

const desc1 = "i m HAPPY"
console.log(desc1.toUpperCase()) // I M HAPPY
console.log(desc1.toLowerCase()) // i m happy

인덱스 번호 찾기 - indexOf()

특정 문자열이 위치한 첫 인덱스 값을 찾을 때 사용합니다.

let desc = "Hi guys. Nice to meet you"
console.log(desc.indexOf('guys')) // 3

if문과 함께 사용할 때는 문자열의 위치를 고려하여 인덱스 값에 1를 더해줍니다.

let desc = "Hi guys. Nice to meet you."
if (desc.indexOf('Hi')+1) {
  console.log("Hi가 포함되어 있습니다.")
}

특정 범위의 문자열 추출1 - slice()

특정 범위의 문자열을 추출할 때 사용합니다.

인수를 하나만 입력했을 경우, 첫 번째 인수를 기점으로 문자열을 반환합니다.

let desc = "Hi guys."
console.log(desc.slice(1)) // "i guys."

인수를 두 개 입력했을 경우, 첫 번째 인수 부터 두 번째 인수 직전까지 문자열을 반환합니다.

let desc = "Hi guys."
console.log(desc.slice(1,4)) // "i g"

인수를 음수로 입력할 경우 뒤에서부터 인덱스를 카운트 합니다.

let desc = "Hi guys."
console.log(desc.slice(2,-1)) // " guys"
// 인덱스 2부터 마지막인덱스-1 직전까지 출력

특정 범위의 문자열 추출2 - substring()

특정 범위의 문자열을 추출할 때 사용합니다.

slice()와 유사하게 동작하지만 음수를 허용하지 않습니다.

또한, 첫 번째 인수와 두 번째 인수를 변경해도 결과 값이 동일합니다.

let desc = "Hi guys."
console.log(desc.substring(2, 5)) // " gu"
console.log(desc.substring(5, 2)) // " gu"

특정 범위의 문자열 추출3 - substr()

특정 범위의 문자열을 추출할 때 사용합니다. substring()와는 작동 방식이 전혀 다릅니다.

첫 번째 인수 값을 기준으로 두 번째 인수 값만큼 추출하는 방식입니다.

let desc = "Hi guys."
console.log(desc.substr(3, 1)) // "g"

공백 제거 - trim()

문자열의 앞/뒤 공백을 제거할 때 사용합니다. 주로 입력 값에서 공백이 전달 된 경우를 예측하여 많이 사용합니다.

이때, 문자열 사이에 존재하는 공백은 제거하지 않습니다.

let desc = "Hi guys.     "
console.log(desc.trim()) // "Hi guys."

문자열 반복 - repeat()

문자열을 반복하여 실행할 때 많이 사용됩니다.

let stringEx = "abcd"
console.log(stringEx.repeat(3)) // "abcdabcdabcd"

아스키 코드와 문자열 - codePointAt() & fromCodePoint()

아스키 코드 값을 기준으로 문자열 간 비교가 가능합니다.

아스키 코드 표를 외울 필요는 없으며, 소문자가 대문자 보다 더 크다는 것을 숙지하고 있으면 유용합니다.

또한, A → Z 방향으로 커진다는 점도 숙지하고 있어야 합니다.

console.log("a" < "c") // true
console.log("A" < "c") // true

아스키 코드 값을 반환하는 메서드와 아스키 코드 값을 통해 문자를 반환하는 메서드가 있습니다.

console.log("a".codePointAt()) // 97
console.log(String.fromCodePoint(97)) // "a"