JS 문자열 메서드 정리

문자열 메서드 헷갈려서 몇 개만 요약 및 사용법 좀 적어볼까 한다. 기왕 하는거 아는 것도 적어볼까 한다.

indexOf

인수로 전달받은 문자열 검색해 인덱스를 반환한다.

const x = "hong seongkwon"
x.indexOf("o")
// 1

x.indexOf("ng")
// 첫 번째 인덱스를 검색한다.
// 따라서 2

x.indexOf("s")
// 띄어쓰기 포함함.
// 5

x.indexOf("o", 6)
// 2번째 인자는 어디서부터 인덱스 찾을 건지 지정해주는 것
// 7

x.indexOf("x")
// 인자로 넣어준 값이 문자열에 없으면 -1 반환. 따라서 -1
// includes와 같은 역할 수행하지만 
// includes는 인터넷 익스플로러와 호환되지 않으므로 indexOf 사용 권장

search

문자열에서 인수로 전달받은 정규표현식을 검색하고 인덱스 반환. 마찬가지로 없으면 -1 반환.

const x = "hong seongkwon"
x.search(/g/)
// 3

includes

es6에 도입됨. 문자열에 인수로 전달받은 문자열이 포함되어 있는지 확인해 boolean값 반환

const x = "hong seongkwon"
x.includes("h")
// true

x.includes("x")
// false

startsWith

es6에 도입됨. 문자열이 인수로 전달받은 문자열로 시작하는지 확인해 boolean값 반환

const x = "hong seongkwon"
x.startsWith("ho")
// true

x.startsWith("x")
// false

endsWith

es6에 도입됨. 문자열이 인수로 전달받은 문자열로 끝나는지 확인해 boolean값 반환

const x = "hong seongkwon"
x.endsWith("kwon")
// true

x.endsWith("x")
// false

substring

인수로 2개를 받는데 1번째는 시작 인덱스, 2번째는 끝인덱스, 시작인덱스에서 끝인덱스 - 1까지 부분문자열 반환

const x = "hong seongkwon"
x.substring(0,4)
// hong

x.substring(3)
// 2번째 인자는 생략 가능. 생략하면 끝까지 반환
// g seongkwon

x.substring(3,0)
// 첫 번째보다 두 번째가 작으면 교환됨
// hong

x.substring(-2)
// 음수거나 NaN의 경우 0으로 바뀜.
// hong seongkwon

x.substring(0, 50)
// 인수가 문자열의 lenght보다 길면 length로 바뀜.
// 즉 x.substring(0, 14)로 바뀐다는 것
// hong seongkwon

slice

substring 메서드와 동일하게 동작하지만 음수인 인수 전달 가능

const x = "hong seongkwon"
x.slice(0,4)
// hong

x.slice(-2)
// 음수 값 전달 시 맨 뒤가 -1이 되고 그 앞이 -2가 되는 식
// on

x.slice(3,0)
// 두 번째 인자가 첫 번째 인자보다 뒤면 빈 값 반환
// ''