[JavaScript] 문자열 다루기 Step#1

알고리즘 문제풀이하는데가장 기본이며, 중요하다고 생각되는 객체는

바로 문자열과 배열이라고 생각합니다.

 

오늘은 이번에는 문자열을 다루는 기술에 대해서 공부해보려고 합니다.

 

 

 

문자열을 다루는 법은 엄청 중요하고 많은 양이지만,

빠르고 간단하게 핵심만 짚어보고 가볼까 합니다!!

그래도 Step을 나눠서 진행해보겠습니다.

 

 

 

먼제 이번 Step에서 진행할 문자열 다루기 방법은 아래와 같습니다.

중요한 순으로 한번 공부해보겠습니다.

 

 

 

 

[String(문자열) 다루는 방법]

• 문자열 연산자
• charAt()
• concat()
• includes()
• indexOf() / lastIndexOf()
• replace()
• slice()
• split()
• substring()
• toLowerCase() / toUpperCase()
• toString()
• trim()

 

 

 

 

◎ 문자열 연산자

문자열은 "+" 연산자로 두 개 이상의 문자열을 하나로 합칠 수 있습니다.

또한, 비교 연산자인 ==, !=, >, >=, <, <=과 같은 연산자로 값을 비교할 수 있습니다.

 

 

그럼 예로 알아보겠습니다.

먼저 "+" 연산자로 두 개의 문자열을 하나로 합치는 예입니다.

 

 

var str1 = "Hello";
var str2 = "World";

console.log(str1 + str2);

// HelloWorld

 

 

"Hello"라는 str1 변수와 "World"라는 str2 변수를 더해서

"HelloWorld"라는 문자열을 출력해보았습니다.

여기서 "Hello World"와 같이 가운데 띄어쓰기를 하고 싶을 땐 어떻게 더해야할까요?

 

먼저 생각해보시고, 아래를 참고해보세요~

 

console.log(str1 + " " + str2);

// 위와 같이 " " 띄어쓰기 문자열을 추가로 작성하여 더해주면 되겠습니다.

 

 

 

다음으로 비교 연산자를 통해서 두 문자열 간의 대소 비교를 해보겠습니다.

 

var str1 = "abcd";
var str2 = "abde";

console.log(str1 > str2, str1 === str2, str1 < str2);

// false false true

 

즉, 알파벳 사전 순으로 비교해서 비교 연산자의 결과에 따라 true / false 값을 Return 해줍니다.

비교 연산자가 숫자뿐만아니라 문자열까지 비교할 수 있으니 엄청 편리해졌습니다.

 

여기서 잠깐, 알파벳으로 이루어진 문자열이 아닌 숫자로 이루어진

문자열의 비교는 어떤 결과가 나올까요?

 

먼저 생각해보시고, 아래 답을 참고해서 공부해보세요.

 

var str1 = "11111";
var str2 = "1111";
var str3 = "123";

var str4 = "abc";

console.log(str1 < str2, str1 < str3, str1 < str4, str3 < str4);

// false true true true

// 숫자가 큰 순이 아니라, 문자열의 앞에서부터 하나씩 비교하면서 큰 문자열이 크다는 결과를 가져옵니다.

// 비교하다 한쪽이 없는 경우는 없는 쪽이 더 큰 것이고, 알파벳과 숫자를 비교해보면 알파벳이 더 큽니다.

 

 

 

◎ charAt()

charAt() 함수는 String.charAt(index)와 같이 사용되며, 문자열의 index 위치에 있는 단일 문자를 반환합니다.

즉, 문자열에서 몇번째 있는 문자를 찾을 때 활용되는 함수로, 문자열 다루기의 기본이라고 생각합니다.

charAt()을 잘 쓰지 않고 보통은 String[index]의 형태로 단일 문자를 찾아가는데 많이 사용하실겁니다.

 

그럼 예제를 통해 문자열 내 단일 문자 찾아가는 방법 알아보겠습니다.

 

 

var str = "Hello World!!!";

console.log(str.charAt(10));  // d    -- 1
console.log(str[10]);         // d    -- 2

 

 

여기서 1번 방법으로 charAt() 함수를 활용하는 것보다,

2번 방법으로 직접 문자열을 배열과 같이 접근하는 방법을 많이 활용하실 것 같습니다.

저도 그러고 있지만, 문자열 함수인 charAt() 함수도 알아두면 좋을 것 같아요!!

 

 

 

 

◎ concat()

concat() 함수는 String.concat(string2 [, string3 ...] )의 형태로 문자열을 붙이는 데 사용하는 함수입니다.

 

그럼 concat() 함수도 예제를 통해 알아보겠습니다.

 

 

var str1 = "Hello";
var str2 = "World";

console.log(str1.concat(str2));      // HelloWorld
console.log(str1.concat(" ", str2)); // Hello World

 

 

이렇게 str1에 하나의 변수인 str2를 더해서 "HelloWorld"를 만들 수 있고,

str1에 두 개의 변수인 " ", str2를 순서대로 대해서 "Hello World"의 문자열을 만들 수 있습니다.

 

 

str1에 concat() 함수를 써서 문자열을 붙인다고 생각하여,
str1 원본 변수에 영향이 있을 것이라 생각할 수 있으나,
str1.concat() 은 str1에 영향이 없음을 기억해두시기 바랍니다.

즉, 맨 처음에 공부했던 "+" 연산자와 유사하다고 생각하실 수 있습니다.

 

 

 

 

◎ includes()

오늘의 마지막으로 includes() 함수를 알아보겠습니다.

includes() 함수는 String.includes(searchString [, position])의 형태로 쓰입니다.

즉, 첫번째 파라미터는 탐색할 문자열이며, 두번째 파라미터는 탐색할 시작지점입니다.

두번째 파라미터는 없으면 기본값이 0입니다.

 

그럼 includes() 함수도 예제를 통해 문자열 다루기를 알아보겠습니다.

 

var str = "Hello World!!!";

console.log(str.includes("or"));      // true
console.log(str.includes("or", 10));  // false

 

 

위 예제로 볼 수 있듯이, "Hello World!!!" 문자열에 "or"이라는 문자열이 속해 있는지 확인해주는 함수입니다.

Hello World!!!에서 or이 들어있기에, 첫번째는 true를,

or의 위치가 7, 8번째 위치하므로, 10번째 이후부터 있는지를 찾는 두번째 예제는 false를 반환합니다.

 

 

 

 

오늘은 JavaScript로 문자열 다루기 방법에서 첫번째 Step을 다뤄봤습니다.

• 문자열 연산자 - +, 비교연산자
• charAt() - 단일 문자 접근
• concat() - 문자열 붙이기
• includes() - 문자열 포함 여부 확인

알고리즘 풀이에 있어 정말 기본적인 내용이라고 생각되며,

다음 함수들은 다음 문자열 다루기에서 이어서 공부해보겠습니다. 

 

 

 

 

오늘 문자열 다루기는 제가 javascript 문법 및 함수를 헷갈릴 때
항상 참고하는 기본 서적과 같은 "JavaScript MDN"에서
String 객체 사이트를 공유해드리겠습니다.
추가로 공부하시고 싶은 분들은 아래 사이트를 참고해보시기 바랍니다.

 

 

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

 

 

 

그럼 오늘의 문자열 다루기 공부를 마쳐보겠습니다.