Frontend/JS.info 정리

자료구조와 자료형 - 문자열

Creative_Lee 2022. 1. 20. 23:30

자바스크립트에서는 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다.

문자열은 페이지 인코딩 방식과 상관없이 항상 UTF-16 형식을 따릅니다.

 

 

특수 기호

js에는 특수 문자들이 많습니다.

어지럽다.

 

\n 

줄 바꿈 문자 를 사용하면 작은,큰 따옴표로도 여러 줄의 문자열을 만들 수 있습니다.

따옴표를 이용해 만든 문자열과 백틱을 이용해 만든 문자열은 서로 같습니다.

 

백틱을 사용하면 여러 줄 나타내기, 문자열 중간에 따옴표 넣기 전부 해결되니 백틱을 쓰세요!!

 

 

역슬레쉬는 문자열을 정확하게 읽기 위한 용도로 만들어졌으므로

문자열로 보여주고 싶다면 2개를 연달아 사용하면 됩니다.

console.log(`이것이 역슬레쉬 표현법 \\`) 

이것이 역슬레쉬 표현법 \

 

 


문자열의 길이

length 프로퍼티에는 문자열의 길이가 들어있습니다!!

console.log(`몇 글자일까요?`.length) // 8
console.log(`몇 글자일까요?\n`.length) // 9

띄어쓰기도 문자 하나 입니다!

\n도 문자 하나로 취급되니 유의합시다!


특정 글자 접근하기!

str.charAt( ) , 대괄호 [ ]

문자열의 특정글자에 접근하려면 [ ] 대괄호나 str.charAt( ) 메소드를 사용하면 됩니다. 

인덱스 번호와 같은 개념입니다.

let hihi = `안녕하세요`

console.log(hihi[0]) // 안
console.log(hihi[1]) // 녕
console.log(hihi[2]) // 하
console.log(hihi[3]) // 세 
console.log(hihi[4]) // 요

console.log(hihi.charAt(0)) // 안

 

두 접근법의 차이는 접근하려는 값이 없을 때 나타납니다.

let hihi = `안녕하세요`

console.log(hihi[5]) // undefined

console.log(hihi.charAt(5)) // ''   빈 문자열

 

for..of

for..of 문을 사용하면 문자열을 구성하는 글자를 대상으로 한 반복문을 쓸 수 있습니다.

let hihi = `안녕하세요`

for(let char of hihi){
  console.log(char)
}

// 안
// 녕
// 하
// 세
// 요

 


문자열의 불변성

문자열은 접근은 가능하지만 수정을 할 순 없습니다.

문자열에 글자 하나를 바꾸려 하면 에러가 발생합니다.

'use strict'

let hihi = `안녕하세요`

hihi[0] = `녕` // Uncaught TypeError: Cannot assign to read only property '0' of string '안녕하세요'

 

그냥 문자열을 전체 교체 하세요

'use strict'

let hihi = `안녕하세요`

hihi = `안녕하신가요`

console.log(hihi) // `안녕하신가요`

  

 


대, 소문자 변경

toUpperCase( ), toLowerCase( ) 를 사용하면 됩니다.

let hello = `HelLo`

console.log(hello.toUpperCase()) // HELLO
console.log(hello.toLowerCase()) // hello

console.log(hello[0].toLowerCase()) // h
한 글자도 가능해용

부분 문자열 찾기

 

str.indexOf 

str.indexOf ( substr , pos ) 메소드는

이 메소드는 str의 pos에서 시작해, substr이 어디에 위치하는지 찾아줍니다.

찾으면 문자열위치를 번호로 반환합니다. 없다면 -1을 반환합니다.

let hello = `hello my lovely gf`

console.log( hello.indexOf( `lo` ) ) // 3
console.log( hello.indexOf( `lo` , 4)) // 9
console.log( hello.indexOf( `loooo`) ) // -1

 

문자열에서 찾을 부분 문자열 들을 대상으로 어떤 행동을 하고싶다면 ,

반복문안에 indexOf 를 사용하면 됩니다.

let hello = `도현아 안녕~ 어 태훈아 안녕 어? 어~안녕~`

let pos = -1
while( (pos = hello.indexOf(`안녕` , pos + 1 )) != -1 ){
  console.log(pos)
} 
// 4 , 14 , 22

기본적으로 반복문의 조건에 -1 이 되면 즉 찾으려는 값이 없으면 멈추도록 설정해주고

부분 문자열을 찾으면 리턴한 위치를 pos에 대입하여 해당 위치부터 다시 찾도록 코드를 만들었습니다.

 

let hello = `도현아 안녕~ 어 태훈아 안녕 어? 어~안녕~`

let pos = -1
while( (pos = hello.indexOf(`안녕` , pos + 1 )) != -1 ){
  console.log(pos)
} 
// 4 , 14 , 22

 

includes

includes 메소드는

부분 문자열의 포함 여부만 true, false로 알려줍니다.

let hello = `도현아 안녕~ 어 태훈아 안녕 어? 어~안녕~`

console.log(hello.includes(`안녕`)) // true
console.log(hello.includes(`안녕`,23)) // false

indexOf 메소드 처럼 두번째 인자를 넘기면 해당 위치부터 검색합니다!

 

startsWith, endsWith

startsWith, endsWith 메소드는

문자열의 시작이나 끝이 특정 문자열인지 검사하여 true, false로 알려줍니다. 

let hello = `도현아 안녕~ 어 태훈아 안녕 어? 어~안녕~`

console.log(hello.startsWith(`도현`)) // true --> 도현으로 시작합니다.
console.log(hello.endsWith(`안녕~`)) //  true --> 안녕~으로 끝납니다.

 


부분 문자열 추출하기

 

slice

str.slice( start  [ , end ]  ) 메소드는

문자열의 start부터 end까지를 리턴합니다.  ( end는 제외입니다. )

let hello = `도현아 안녕~ 어 태훈아 안녕 어? 어~안녕~`

console.log(hello.slice(0,6)) // 도현아 안녕

console.log(hello.slice(6)) // ~ 어 태훈아 안녕 어? 어~안녕~
두번째 인자가 없다면 문자열 끝까지 리턴합니다

console.log(hello.slice(-5)) // 어~안녕~
인자로 음수가 오면 문자열의 끝에서부터 계산합니다.

 

 

substring

str.substring( start [ , end ] ) 메소드는

문자열의 start 와 end 사이의 값을 리턴합니다.

 

slice 메소드와 유사하지만

substring 메소드에서는 start 지점이 end 지점보다 커도 됩니다.

 

대신 음수는 허용하지 않습니다. 생각해 보면 당연합니다. 필요가 없어용.

뒤에서 앞으로, 앞에서 뒤로 다 서치가 가능하니까요

혹시나 음수를 넣으면 자동으로 0으로 처리됩니다.

let hello = `도현아 안녕~ 어 태훈아 안녕 어? 어~안녕~`

console.log(hello.substring(6,0)) // 도현아 안녕
console.log(hello.substring(0,6)) // 도현아 안녕

 

 

챕터 요약

 

1. 백틱이 짱이다.

 

2.  js에선 \n 과 같은 특수 문자들이 많다.

 

3. 문자열의 글자 하나를 바꿀 수는 없다. 그냥 새로운 문자열을 만들어 할당하자.

 

4. 문자열 내의 글자는 [ ] 대괄호에 0부터 시작하는 번호를 넣어 얻을 수 있다.

 

5. 부분 문자열을 찾기 위해 indexOf( ) 메소드를 사용할 수 있다.

    첫 번째 인자로 원하는 부분 문자열을 넣고, 두 번째 인자로 원하는 위치를 선택한다.

    원하는 위치에서 찾기 시작해서 부분 문자열이 시작되는 번호를 리턴한다.  

    시작점의 번호는 0이다.

 

6. 부분 문자열의 위치는 필요없고 존재 유무만 알고 싶을 때는 includes( ) 메소드를 사용한다.

   첫 번째 인자로 원하는 부분 문자열을 넣고, 두 번째 인자로 원하는 위치를 선택한다.

   원하는 위치에서 찾기 시작한다.

   있으면 true 없으면 false를 리턴한다.

 

7. 부분 문자열을 추출하기 위해 slice( ), substring( ) 메소드를 사용할 수 있다.

 

    slice( )는 시작점 인자는 필수 , 끝점 인자는 선택이다.

    문자열에 시작점 번호부터 끝점 번호까지를 리턴한다.

    끝 지점을 지정하지 않으면 문자열의 끝까지 리턴한다.

    인자에 음수가 올 수 있고 이는 문자열의 끝 부터 카운팅을 함을 의미한다.

    시작점이 끝점보다 클 수 없다.

    

    

    substring( )은 시작점 인자는 필수, 끝점 인자는 선택이다.

    전체적인 작동 방식은 slice( )와 유사하나, 

    인자에 음수가 올 수 없는 대신 시작점이 끝점보다 클 수 있다.   

 

 

 

 

 

기본이 중요하다.