(37) JavaScript - 자료형(심화) / 문자열 접근

숫자 값을 객체처럼 다룰 수 있듯이 

자바스크립트에서는 문자열도 객체처럼 다룰 수 있다.

 

문자열을 다루는 여러가지 방법이 있고 일단 배열과 비슷한 부분이 많다.

 

문자열에 접근하기

 ▽ 문자열 길이

배열에서도 봤지만 length 프로퍼티는 문자열의 길이를 알려주는 역할을 한다.▼

    //String
    let myString = '안녕하세요'

    //문자열 길이
    console.log(myString.length); //length 프로퍼티

 

글자 길이에 맞게 5가 출력 된 것을 확인 할 수 있다.

 

---

▽ 문자열 요소 접근

그리고 문자열도 글자 하나하나에 접근할 수도 있다.▼

    //요소 접근
    console.log((myString[3])); //대괄호 표기법
    console.log(myString.charAt(3)); //charAt 메소드

배열에서 사용하는 대괄호 표기법과 인덱스를 통해서 접근할 수도 있고

문자열은 charAt라는 메소드를 활용해서 접근할 수도 있다.

 

실행해보면 3번 index에 있는 문자열 '세'를 가져온 것을 확인할 수 있다.

 

---

▽문자열 요소 탐색

그리고 배열에서 활용할 수 있는 indexOf와 lastIndexOf를 활용해서 요소를 찾을 수 있다.▼

    //요소 탐색
    console.log(myString.indexOf('요')); //앞 부터 [4번인덱스]
    console.log(myString.lastIndexOf('요')); // 뒤 부터[0번 인덱스]

indexOf는 앞에서부터 문자열을 찾기 때문에 '요'는 4번째 인덱스에 있으므로 4가 출력될 것이고

lastIndexOf는 뒤에서 부터 문자열을 찾기 때문에 '요'는 0번째 인덱스에 있으므로 0이 출력될 것이다.

 

또한 없는 문자열을 찾으려고하면 -1이 출력된다. ▼

console.log(myString.indexOf('야')); // 없는 문자열 [-1]

 

---

▽ 문자열 대소문자 변환

    //대소문자 변환
    let myString2 = 'Hello'
    console.log(myString2.toUpperCase()); //대문자
    console.log(myString2.toLowerCase()); //소문자

▲ toUpperCase는 대문자로, toLowerCase는 소문자로 변환해준다.

---

 

▽ 문자열 양끝 공백 제거 (trim)

trim 메소드는 문자열을 양 끝에 공백을 제거해준다.

let myString = '   안녕하세요   '
console.log(myString.trim()); //trim 메소드

 

--

▽ 부분 문자열 가져오기 (slice)

앞에서 요소를 접근하는 문자열 하나만 가져오는 방법을 썼다면

slice 메소드는 부분 문자열을 가지고오는 메소드이다.

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

slice는 두 개의 파라미터를 가지고 있으며 시작과 끝 인덱스에 접근한다.

한 가지 주의해야할 점은 끝 인덱스 바로 직전까지의 범위를 가져오기 떄문에 

(slice(0, 2)) - 예를들어 0번 인덱스부터 2번 인덱스 직전까지 

그러니까 0번부터 1번 인덱스까지 문자열을 리턴해준다.

 

(slice(3)) - 그리고 배열에서 배웠던 splice와 마찬가지로 두 번째 파라미터를 생략하게 되면 

시작 지점부터 끝까지 문자열을 리턴하고 

(slice()) - 모두 다 생략해서, 경우에는 그냥 문자열 전체를 가지고 온다.

 

 

---

▼ +α 문자열과 배열 사이에 관한 고찰

생각해보면 문자열도 '문자' + '열' 이기 때문에 배열과 비슷한 부분들이 많다.

 

실제로 배열과 문자 모두 length프로퍼티를 가지고 있고, 대괄호 표기법으로 각 요소에 접근 가능하다시피

꽤 많은 메소드들이 배열과 문자열 모두 동일하게 사용되는 것도 확인 할 수 있었는데

 

한 가지 더 있다면 배열을 다룰 때 for...of문을 문자열에 유용하게 활용할 수도 있다.▼

    let myString3 = 'Hello'
    for (let str of myString3) {
        console.log(str);
    }

 

하지만 비슷하다고 해서 완전히 같다고는 할 수 없다.

tyyop 연산자를 사용해서 두 값의 자료형을 비교해보면 ▼

    let myString3 = 'Hello'
    for (let str of myString3) {
        console.log(str);
    }

    let myArray = ['H', 'e' , 'l', 'l', 'o']
    console.log(typeof myString3);
    console.log(typeof myArray);

 

 확실히 서로 다른 자료형인 걸 확인할 수 있고

두 값을 서로 비교해보면..▼

    console.log(myString3 === myArray);
    console.log(myString3 == myArray);

 

 

일치 비교 뿐만아니라 동등비교에서도 false가 출력되는 것을 확인할 수 있다.

---

가장 중요한 차이는 배열은 'mutable(바뀔 수 있는)' 자료형인 반면

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

 

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

문자열은 한 번 할당된 값을 수정할 수 없다.

다르게 표현해서, 변수에 할당된 문자열을 바꾸고 싶다면

일부를 바꾸는 게 아니라 새로운 문자열을 지정해주어야 한다는 것이다.▼

    // 배열은 mutable
    let myArray1 = ['H', 'e' , 'l', 'l', 'o']
    myArray1[0] = 'A';
    console.log(myArray1);

    // 문자열은 immutable
    let myString4 = 'Hello';
    myString4[0] = 'A';
    console.log(myString4);

 

정리하면 문자열이 가진 메소드들은 모두 return 값을 활용하고

본래의 문자열 값을 수정하지 않는다.

같은 의미에서 문자열에 splice 같은 메소드들은 사용할수 없을 것이다.

 

문자열과 배열은 서로 비슷하지만 엄연히 다른 차이가 있다는 점을 이해하고 넘어가자. 

---

★GitHub 주소 (문자열에 접근하기)

https://github.com/SeopE9611/JavaScript_soloPlay/blob/main/Basic/10-%EC%9E%90%EB%A3%8C%ED%98%95(%EC%8B%AC%ED%99%94)/5.%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%8B%AC%ED%99%94.html

JavaScript_soloPlay/Basic/10-자료형(심화)/5.문자열-심화.html at main · SeopE9611/JavaScript_soloPlay

 

★Notion 주소 (원하는 문자열 출력하기)

https://purrfect-gargoyle-935.notion.site/114e9530b3e1801f8cece67309f6d839?pvs=4

원하는 문자열 출력하기 | Notion