[javascript] String(문자열) 내에 접근하는 다양한 함수 정리

 

* String(문자열) 내에 접근하는 다양한 방법 

🫠 javascript에서 String에 접근하는 방법으로 위치 기반 접근, 길이 기반 접근, 스펠링, 개수... 등 다양한 방법들이 존재한다. 

이 중 내가 상황에 맞게 어떤 함수를 사용해야 보다 빠르게 원하는 값을 찾을 수 있는지 효율을 높이며 시간을 절약하기 위해 아래와 같이 정리하였다.

 

 

---

인사를 나타내는 문자열을 예시로 들어 확인해 보자

> 콘솔창 : how are you? 확인 

 

 

🫠 indexOf( ) / lastIndexOf( )

> 문자열에서 원하는 문자가 몇 번째 자리에 있는지 검색

> 입력 형식 : indexOf('원하는 문자', 몇 번째 자리부터 찾아줘);

👉🏻 output : 4 \n 1 \n 9 
❗️ indexOf에서 확인할 점은 만약 문자열에 중복되는 문자가 있을 경우, 앞에 있는 문자만 찾아, 출력한다. 
❗️따라서 중복되는 문자 중 첫 문자 외에 찾고 싶을 경우, 위치를 지정하여 입력해 주자. 
✅ 또는 console.log(str.lastIndexOf('o')); 를 하여 뒤에서부터 찾아줘!라고 지정할 수 있음 > output : 9

 

 

---

🫠 includes( ) & startsWith( ) / endsWith( )

> includes( ) : 문자열에서 원하는 문자가 포함되어 있는지 검색

 

> startsWith( ), endsWith( ) : 문자열이 어떤 문자로 시작되는지(끝나는지) 검색

> 입력 형식 : startsWith('원하는 문자 or 단어', 몇 번째 자리부터 찾아줘');

👉🏻 output : true \n false \n true \n true 
❗️ starsWith( ) 함수를 사용할 경우, are의 re만 작성하면 false를 출력한다.
❗️따라서 re만 찾고 싶은 경우, re가 시작하는 위치를 지정해서 작성하자
✅ endsWith도 마찬가지로 사용

 

 

---

🫠 toUpperCase( ) & toLowerCase( )

> 문자열을 대문자 & 소문자로 변환

 

* 조금 더 쉽게 확인하기 위해 str 변수에 "How Are You?"로 재할당해주자

👉🏻 output : HOW ARE YOU?  \n  how are you?

 

 

---

🫠 replace( )

> 원하는 문자를 치환하여 새로운 변수에 저장 (치환된 문자열 반환)

> 입력 형식 : replace('원본 문자', '변경할 문자')

 

* str2 식별자에 'hello, world! :)'; 할당해 주자

👉🏻 output : hi, world! :)
✅ str2의 문자 중 'hello' 부분을 'hi'로 치환하여 새로운 변수 str2_chg에 할당해 주었다.
❗️ But 만약 중복되는 문자가 있거나, 대소문자가 구분되어 있다면?

 

 

🫠  replace( ) g / i 사용

> g : 치환하려는 문자가 중복될 경우, 모두 치환하고 싶을 때

> i : 치환하려는 문자를 대소문자 구분 없이 모두 치환하고 싶을 때

> 입력 형식 : /치환하려는 문자/g or i or gi

 

* str2 식별자에 'Hello, WorLd! :)' 재할당해 주자

👉🏻 output : Henlo, WorLd! :) \n Henno, Wornd! :)
✅ 중복되는 'l'이 g로 인해 모두 'n'으로 치환되었고, 대문자 'L'이 i로 인해 대소문자 구분 없이 'n'으로 치환되었다.

 

 

---

🫠  slice( ) 

> 원하는 문자 추출 (위치 기반)

> 입력 형식 : slice(시작 위치, 끝 위치)

 

* new_str 식별자에 'Hi, good girl!' 할당 해주자

👉🏻 output : Hi, g   \n   g   \n   good girl!   \n  girl!
✅ 1번 콘솔 > new_str의 문자열 중에서 위치 0부터 5까지 추출해 줘 (실제로 0부터 4까지 추출됨. 즉, 마지막 위치 전까지 출력)
✅ 4번 콘솔 > 음수도 사용 가능. 즉, 뒤에서부터 -5번째 자리인 g부터 추출

❗️ But 만약 시작위치가 끝 위치보다 값이 크게 들어갈 경우에는?

 

 

🫠  slice( ) & substring( )

> slice( )의 경우, 시작 위치의 값이 지정한 끝 위치보다 클 경우, 공백으로 나오면서 오류 없이 출력된다.

> But substring( )의 경우, 시작 위치 값이 더 커도 자동으로 바꿔 해석하여 제대로 출력된다.

 

✅ 또한 silce( )와 substring( )은 원본을 훼손하지 않는다 👇🏻

 

 

---

🫠  substr( )

> 원하는 문자 추출 (길이 기반)

> 입력 형식 : substr(시작 위치, 개수)

 

* new_str 식별자에 'Hi, good girl!' 할당해 주자

👉🏻 output : Hi, good  \n  good girl!
✅ substr( )은 slice( ), substring( )과는 다르게 원하는 시작 위치와 출력하고 싶은 개수를 적어주면 된다.

 

 

---

🫠  split( )

> 문자열을 배열로 분할하여, 배열로 값을 출력

> 입력 형식 : split('분할 기준', 개수);

 

* 여러 가지 예시를 들어보자

👉🏻 output : 화면 확인
✅ 1번 ~ 3번 콘솔 > split에 ' , ' ' ; ' '공백' 등 다양한 기준점을 넣어 배열로 분할할 수 있다.
✅ 4번 콘솔 > 기준점을 따로 적지 않을 경우에는 한 글자씩 분할된다.
✅ 5번 콘솔 > 개수를 지정할 수 있다. (몇 개까지 출력해 줘)

 

 

---

🫠  charAt( ) & charCodeAt( )

> charAt( ) : n번째 자리에 있는 문자 출력

> charCodeAt( ) : n번째 자리에 있는 문자 코드 출력

👉🏻 output : g  \n  103
✅ charAt 함수를 사용하여 문자열 중 원하는 자리에 위치하고 있는 문자를 출력할 수 있다.
✅ charCodeAt 함수를 사용하여 해당 위치에 있는 문자의 코드를 출력할 수 있다.