Study JavaScript 0506 - 1hr 문자열

변승훈·2022년 5월 11일
0

Study JavaScript

목록 보기
16/43

문자열

자바스크립트엔 글자 하나만 저장할 수 있는 별도의 자료형이 없으며, 텍스트 형식의 데이터는 길이에 상관없이 문자열 형태로 저장된다.

따옴표

  • 작은 따옴표('')
  • 큰 따옴표("")
  • 백틱(``): 표현식을 ${...}으로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있다. 이런 방식을 템플릿 리터럴(template literal)이라고 부른다.
    function sum(a, b) {
      return a + b;
    }

    console.log(`1 + 2 = ${sum(1, 2)}.`); // 1 + 2 = 3.

또한 백틱을 사용하면 문자열을 여러 줄에 걸쳐 작성할 수 도 있다.

    let guestList = `손님:
    * Hun
    * Peter
    * Ironman
    `;

    console.log(guestList); // 손님 리스트를 여러 줄에 걸쳐 작성함

특수 기호

  • \n: 줄 바꿈

  • \r: 캐리지리턴, Windows에서 캐리지 리턴과 줄 바꿈을 조합해 줄을 바꾼다.(\r\n)

  • \', \": 따옴표

  • \: 역슬래시

  • \t: 탭

    문자열의 길이

    length 프로퍼티에 문자열의 길이가 저장된다.

       console.log('Hu\nn'.length);  // 4, 특수 문자도 하나로 취급된다.
 ## 특정 글자에 접근하기
대괄호를 사용하여 접근할 수 있으며 위치는 0부터 시작한다.(zero-based)
```js
    let str = `Hello`;

    // 첫 번째 글자
    console.log( str[0] ); // H

    // 접근할 위치에 글자가 없으면 undefined를 반환
    console.log(str[10]); // undefined

    // 반복문을 통한 글자 출력
    for (let char of "Hello") {
      console.log(char);  // H, e, l, l, o
    }

문자열의 불변성

문자열은 수정이 불가능하며 새로운 문자열을 만들어 할당하는 것이 좋다.

    let str = 'Hi';
    str[0] = 'h'  // Error
    str = 'h' + str[1]; // 문자열 전체를 교체
    console.log(str); // hi

대소문자 변경하기

toLowerCase()와 toUpperCase()를 이용하여 대문자에서 소문자, 소문자에서 대문자로 변경시켜준다.

    console.log( 'Interface'.toUpperCase() ); // INTERFACE
    console.log( 'Interface'.toLowerCase() ); // interface

부분 문자열 찾기

1.str.indexOf(substr, pos)

이 메소드는 문자열 str의 pos에서부터 시작해, 부분 문자열 substr이 어디에 위치하는지를 찾아준다. 원하는 부분 문자열을 찾으면 위치를 반환하고 그렇지 않으면 -1을 반환한다.

    let str = 'Widget with id';

    console.log( str.indexOf('Widget') ); // 0, str은 'Widget'으로 시작함
    console.log( str.indexOf('widget') ); // -1, indexOf는 대·소문자를 따지므로 원하는 문자열을 찾지 못함
    console.log( str.indexOf("id") ); // 1, "id"는 첫 번째 위치에서 발견됨 (Widget에서 id)
    // pos 이용
    console.log( str.indexOf('id', 2) ) // 12

2. includes, startsWith, endsWith

각각 포함 여부, 시작 여부, 끝나는 여부를 알 수 있는 메소드들 이다.

    let str = 'Widget with id';

    // includes
    console.log( "Widget with id".includes("Widget") ); // true
    console.log( "Hello".includes("Bye") ); // false

    // startsWith
    console.log( "Widget".includes("id") ); // true
    console.log( "Widget".includes("id", 3) ); // false, 세 번째 위치 이후엔 "id"가 없다.
    
    // endsWith
    console.log( "Widget".startsWith("Wid") ); // true, "Widget"은 "Wid"로 시작한다.
    console.log( "Widget".endsWith("get") ); // true, "Widget"은 "get"으로 끝난다.

부분 문자열 출력하기

1. str.slice(start [, end])

문자열의 start부터 end까지(end 미포함)를 반환한다.
두 번째 인수가 생략된 경우, 명시한 위치부터 문자열 끝까지를 반환하며, start와 end는 음수가 될 수 있다.
음수를 넘기면 문자열 끝에서부터 카운팅을 시작한다.

    let str = "stringify";
    console.log( str.slice(0, 5) ); // 'strin', 0번째부터 5번째 위치까지(5번째 위치의 글자는 포함하지 않음)
    console.log( str.slice(0, 1) ); // 's', 0번째부터 1번째 위치까지(1번째 위치의 자는 포함하지 않음)
  
    // 두 번째 인수 생략
    console.log( str.slice(2) ); // ringify, 2번째부터 끝까지
  
    // 음수
    // 끝에서 4번째부터 시작해 끝에서 1번째 위치까지
    console.log( str.slice(-4, -1) ); // gif

2. str.substring(start [,end])

start와 end 사이에 있는 문자열을 반환한다.
slice와의 차이는 start가 end보다 커도 괜찮다는 것이다. 음수 인수를 허용하지 않으며 0으로 처리한다.

    let str = "stringify";

    // 동일한 부분 문자열을 반환
    console.log( str.substring(2, 6) ); // "ring"
    console.log( str.substring(6, 2) ); // "ring"

    // slice를 사용하면 결과가 다르다.
    console.log( str.slice(2, 6) ); // "ring" (같음)
    console.log( str.slice(6, 2) ); // "" (빈 문자열)

3. str.substr(start [, length])

start에서 부터 시작해 length개의 글자를 반환한다.
길이를 기준으로 문자열을 추출한다는 점에서 substring, slice와 차이가 있다.

    let str = "stringify";

    console.log( str.substr(2, 4) ); // ring, 두 번째부터 글자 네 개
    console.log( str.substr(-4, 2) ); // gi, 끝에서 네 번째 위치부터 글자 두 개

문자열 비교하기

1. str.codePointAt(pos)

pos에 위치한 글자의 코드를 반환한다.

    // 글자는 같지만 케이스는 다르므로 반환되는 코드가 다르다
    console.log( "z".codePointAt(0) ); // 122
    console.log( "Z".codePointAt(0) ); // 90

2. String.fromCodePoint(code)

숫자 형식의 code에 대응하는 글자를 만들어 준다.

    console.log( String.fromCodePoint(90) ); // Z
profile
잘 할 수 있는 개발자가 되기 위하여

0개의 댓글