자바스크립트에서는 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장됩니다.
문자열은 페이지 인코딩 방식과 상관없이 항상 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 를 사용하면 됩니다.
기본적으로 반복문의 조건에 -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( )와 유사하나,
인자에 음수가 올 수 없는 대신 시작점이 끝점보다 클 수 있다.
음수를 넣으면 0으로 처리된다.
'Frontend > JS.info 정리' 카테고리의 다른 글
자료구조와 자료형 - 배열 (0) | 2022.01.24 |
---|---|
자료구조와 자료형 - 문자열 (0) | 2022.01.20 |
자료구조와 자료형 - 숫자형 (0) | 2022.01.18 |
자료구조와 자료형 - 원시값의 메소드 (0) | 2022.01.16 |
객체: 기본 - 객체를 원시형으로 변환하기 (0) | 2022.01.11 |