[JavaScript(14)] includes()로 문자열 안에 글자 찾기? 문자열 이해하기

 

안녕하세요~  경제적 자유입니다.

오늘은 JavaScript의 문자열(string)을 리뷰해보려고 합니다.

 

OverView

---

문자열은 우리가 코딩할 때 정말 자주 만나는 자료형입니다.

 

예를 들어 이름, 이메일, 비밀번호, 게시글 제목, 검색어, 버튼 문구 같은 것들은 대부분 문자열로 다룹니다.

 

const name = "상구";
const message = "안녕하세요!";
const email = "sanggu@example.com";

 

쉽게 말하면 문자열은 글자를 담는 상자입니다.

 

그런데 JavaScript 문자열은 단순히 글자만 담는 게 아니라, 길이를 확인하거나, 특정 글자를 꺼내거나, 일부만 자르거나, 대문자와 소문자를 바꾸는 등 다양한 기능을 제공합니다.

 

문자열은 배열처럼 인덱스로 접근할 수 있지만, 배열은 아닙니다.
그리고 문자열은 한 번 만들어지면 직접 수정할 수 없는 불변성을 가지고 있습니다.

 

추가로 더 자세히 공부하고 싶다면 아래 MDN 문서를 참고해보세요.

• 참고 링크: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

 

 

개념 설명

---

1. 문자열이란?

문자열은 문자들이 순서대로 나열된 값입니다.

 

JavaScript에서는 글자 하나만 따로 저장하는 별도의 자료형이 없습니다.

글자 하나든, 문장 전체든 모두 문자열로 다룹니다.

 

문자열의 표현

const name1 = '상구'; //''
const name2 = "상구"; //""
const name3 = `상구`; //``

 

특수 문자

 

특수문자	의미
\n	줄바꿈
\t	탭
\'	작은따옴표
\"	큰따옴표
\\	역슬래시

 

 

---

2. 문자열의 특정 글자에 접근하기

 

문자열은 배열처럼 인덱스를 사용해 특정 글자에 접근할 수 있습니다.

 

const name = "상구"; 

console.log(name[0]); // 상 
console.log(name[1]); // 구

 

대괄호 접근과 charAt()의 차이

 

존재하지 않는 위치에 접근하면 차이가 있습니다.

const name = "상구";

console.log(name[100]); // undefined
console.log(name.charAt(100)); // ""

 

대괄호 접근은 undefined를 반환하고,

 

charAt()은 빈 문자열을 반환합니다.

 

---

3. 문자열은 배열일까?

 

문자열 배열처럼 보일 때가 있습니다.

 

const name = "상구"; 

console.log(name[0]); // 상 
console.log(name[1]); // 구

 

문자열을 바꾸고 싶다면?

let name = "상구";

name = "민" + name[1];

console.log(name); // 민구

 

또는 slice()를 사용할 수도 있습니다.

let name = "상구";

name = "민" + name.slice(1);

console.log(name); // 민구

 

---

4. toUpperCase()와 toLowerCase()란?

 

toUpperCase()는 문자열을 대문자로 바꾸는 메서드입니다.

const word = "javascript";

console.log(word.toUpperCase()); // JAVASCRIPT

 

toLowerCase()는 문자열을 소문자로 바꾸는 메서드입니다.

const word = "JAVASCRIPT";

console.log(word.toLowerCase()); // javascript

 

이 메서드들은 원본 문자열을 직접 바꾸지 않습니다.

 

---

5. indexOf()란?

 

indexOf()는 문자열 안에서 특정 문자열이 어디에 있는지 찾아주는 메서드입니다.

const sentence = "상구는 JavaScript를 공부합니다.";

console.log(sentence.indexOf("JavaScript")); // 4

 

JavaScript가 인덱스 4번 위치에서 시작하기 때문에 4가 반환됩니다.

 

 

---

6. includes()란?

 

includes()는 문자열 안에 특정 문자열이 포함되어 있는지 확인하는 메서드입니다.

const sentence = "상구는 JavaScript를 공부합니다.";

console.log(sentence.includes("JavaScript")); // true
console.log(sentence.includes("Python")); // false

 

includes()는 결과를 true 또는 false로 반환합니다.

 

---

6. split()이란?

 

split()은 문자열을 특정 기준으로 나누어 배열로 만드는 메서드입니다.

const sentence = "상구,민수,지훈";

const result = sentence.split(",");

console.log(result); // ["상구", "민수", "지훈"]

 

split()과 join()

split()은 문자열을 배열로 만들고,
join()은 배열을 다시 문자열로 만듭니다.

const name = "상구";

const arr = name.split("");
const result = arr.join("-");

console.log(result); // 상-구

 

마무리

---

 

오늘은 JavaScript의 문자열을 정리해보았습니다.

 

split(), join(), trim(), toLowerCase() 같은 메서드는 알고리즘에서도 많이 사용되었는데 조금 알게 된 것 같아 정말 다행이네요...

 

알고리즘 문제를 요즘 하루에 10개풀기로 했는데 너무 많이 잡은 것 같아 5개로 줄여야할 것 같아요.. ㅠㅠ

 

뭐 어찌되었든, 문자열에서 특정 문자 찾기에 대한 해답은 얻을 수 있을 것 같아요!

 

공부 화이팅!