JavaScript 기초 : 자료형 업그레이드 3. 문자열 - slice메소드

 

3. 문자열 

 

지난 글에서는 

자바스크립트에서는 숫자형을 객체로 다루었고

Math객체와 다양한 메소드들을 살펴보았다. 

JavaScript 기초 : 자료형 업그레이드 2. Math 객체

 

 

문자열 또한 객체처럼 다룰 수 있다. 

문자열은 배열과 비슷한 점이 많다. 

 

length프로퍼티를 이용해서 문자열의 길이를 알 수 있고

 

배열에서 사용하는 index와 대괄호 표기법을 이용해

문자열의 글자 하나하나에 접근할 수 있다. 

 

또한 index[] 와 같은 결과를 내기 위해 

charAt이라는 메소드를 이용해서 문자열 글자 하나하나에 접근할 수 있다.

 

예시를 살펴보자.

//String
let myString = 'Hi Yunju';

//문자열 길이 length
console.log(myString.length);

//문자열 요소 접근
console.log(myString[3]);
console.log(myString.charAt(4));

이런 경우 문자열의 길이는

띄어쓰기를 포함하여

8

이 출력되며

 

문자열 요소는

Y

u

가 출력된다. 

 

 

3-2. 문자열 요소 탐색

 

indexOf와 lastIndexOf를 이용하면

요소를 쉽게 찾을 수 있다. 

 

indexOf는 앞부터lastIndexOf는 뒤부터 찾아서 index넘버를 알려준다.

 

//요소 탐색

let myString = 'Hi Yunju';

console.log(myString.indexOf('i'));
console.log(myString.lastIndexOf('j'));

 위의 경우에는 i와 j 가 몇 번 인덱스인지 알려준다.

 

indexOf는 앞부터lastIndexOf는 뒤부터 찾아서 알려주는데

(뒤부터 찾아서 알려준다는 말은 똑같은 알파벳이 앞과 뒤에 있다면 뒤에 있는 알파벳 인덱스를 알려준다는 얘기다.)

 

결과적으로 

 

1

6

 

이라고 나온다. 

 

만약 없는 문자열의 인덱스를 찾는다면 -1이 나온다. 

 

 

3-3. 대소문자 바꾸어주기 

 

소문자→대문자 : toUpperCase 

대문자→소문자: toLowerCase

를 사용해보자.

//String
let myString = 'Hi Yunju';

//대소문자 변환
console.log(myString.toUpperCase());  //대문자
console.log(myString.toLowerCase());  //소문자

이렇게 적으면 모든 대문자는 소문자로, 모든 소문자는 대문자로 바꾸어 준다~!

 

 

 

3-4. 문자열 사이 양 끝 공백을 지워주는 trim

trim은 문자열 사이의 양 끝 공백을 지워주는 역할을 한다.

//String
let myString =' Hi Yunju ';

//양 끝 공백 제거 
console.log(myString.trim()); // 양 끝에 공백을 제거해줌. 

이렇게 작성하면

H와 u 앞 뒤에 있는 공백을 지운 채

Hi Yunju

를 출력한다. 

 

 

3-5. 부분 문자열 접근 slice(start, end)

 

slice는 시작과 끝 인덱스를 파라미터로 받아서

끝 인덱스 직전까지 부분 문자열을 가져올 수 있다. 

 

두 번째 파라미터를 생략했다면 시작지점부터 끝까지 리턴하고

모든 파라미터를 생략했다면 모든 문자열을 리턴한다.

 

//String
let myString ='Hi Yunju';

//부분 문자열 접접근slice(start, end)
console.log(myString.slice(0,4));
console.log(myString.slice(3));
console.log(myString.slice());

결과는 어떻게 출력될까?

 

Hi Y

Yunju

Hi Yunju

 

이렇게 출력된다~!

 

 

3-6. for ... of 사용해보기

for of를 사용하면 글자 요소 하나하나를 변수로 받아서 출력해준다.

//for...of 사용해보기
let myString = 'JoYunju';

for (let str of myString) {
    console.log(str);
}

결과 값은 어떻게 나올까?

J

o

Y

u

n

j

u

이렇게 출력된다!

 

 

3-7. 배열과 문자열의 다른 점!

 

일단

문자열은 typeof연산자로 확인하면 string이 나오고

배열은 object가 나온다. 

또한

동등비교로 불린 값을 확인해도

false가 출력된다.

 

제일 큰 차이점은!

배열은 mutable(바뀔 수 있는) 자료형이고

문자열은 immutable(바뀔 수 없는) 자료형이라는 것이다.

 

배열은 요소에 접근해서 할당 연산자를 통해 요소를 수정할 수 있다. 

반면에 문자열은 수정할 수 없다. 

 

만약 문자열의 요소를 바꾸고 싶다면 새로운 문자열을 지정해 주어야 한다! 

 

예시를 살펴보자.

배열 myArray를 만들었고 

문자열 myStirng 변수를 만들었다. 

// 배열은 mutable
let myArray = ['Y', 'u', 'n', 'j', 'u', '!'];
myArray[5] = '?';
console.log(myArray);

// 문자열은 immutable
let myString = 'Yunju!';
myString[5] = '?';
console.log(myString);

 

결과 값을 확인해보자!

즉 위의 그림처럼 문자열은 수정을 해도 안바뀐다~!

 

문자열이 가진 메소드을 생각해보면 return 값들을 활용한 것이지, 본래의 문자열 값 자체를 수정하지는 않았다.

 

문자열에 splice를 사용할 수 없는 이유이기도 하다!

 

 

간단한 예시로 slice(sart, end) 메소드를 사용해보자. 

 

 

3-8. 노래 가사 찾기 예시

 

그때 그 여름을 틀어줘

노래에서 비룡 부분의 가사를 찾아볼 것이다. 

 

먼저 biryong 변수를 만들어주고

가사에서 [비룡] 이 부분과 [린다] 이 부분의 인덱스를 찾는다.

 

그리고 slice(start, end) 메서드를 이용해 가사를 출력해준다! 

let lyrics = "[유두래곤]돈이 없었지 깡이 없었나 아 예예예예예 일이 없었지 감이 없었나 아 예예예예예[비룡]Youth- Flex- 이 계절을 아끼지 마요 밤새도록 Play 해줘 [린다] 그 때 그 여름을 틀어줘";

let biryong = null;

// 여기에 코드를 작성해 주세요.
let startIndex = lyrics.indexOf('[비룡]');
let endIndex = lyrics.indexOf('[린다]');

console.log(startIndex);
console.log(endIndex);

biryong = lyrics.slice(startIndex, endIndex);
console.log(biryong);

결과는

 

49

92

[비룡]Youth- Flex- 이 계절을 아끼지 마요 밤새도록 Play 해줘 

 

이렇게 나온다!!!

 

코드를 짤 때 핵심은 indexOf를 이용해서 [비룡] 이 부분의 인덱스를 찾고

[린다] 부분의 인덱스를 찾은 뒤

slice의 startIndex와 endIndex에 넣어준다는 것이다. 

 

간단하지만 생각해내기는 어렵다. 

 

여러 예제들을 통해 slice를 연습해보는 것이 필요하다. 

 

 

다음글에서는 기본형과 참조형에 대해 정리해보자~! 

 

JavaScript 기초 : 자료형 4. 기본형과 참조형