CodeGym /행동 /Frontend SELF KO /문자열과 그에 대한 작업 메서드들

문자열과 그에 대한 작업 메서드들

Frontend SELF KO

레벨 33 , 레슨 3

사용 가능

4.1 문자열 소개

JavaScript에서 문자열은 문자들의 시퀀스를 나타내며, 주요 데이터 타입 중 하나야. 문자열은 싱글 쿼트 ('텍스트'), 더블 쿼트 ("텍스트"), 또는 백틱 (`텍스트`)를 사용하여 만들 수 있어.

문자열 예제:

JavaScript

    
      let singleQuote = 'Hello, World!';
      let doubleQuote = "Hello, World!";
      let backticks = `Hello, World!`;

문자열 객체에서 다음과 같은 메서드를 호출할 수 있어:

메서드	설명
length	문자열의 길이를 반환해줘
charAt(index)	지정된 위치에 있는 문자를 반환해줘
toUpperCase()	문자열을 대문자로 변환해줘
toLowerCase()	문자열을 소문자로 변환해줘
indexOf(substring)	부분 문자열의 첫 번째 출현 인덱스를 반환하거나 찾을 수 없으면 -1을 반환해줘
includes(substring)	문자열이 특정 부분 문자열을 포함하고 있는지 확인하고, true 또는 false를 반환해줘
slice(start, end)	문자열의 일부를 추출하여 새로운 문자열을 반환해줘
replace(searchValue, newValue)	지정된 부분 문자열을 새로운 부분 문자열로 대체해줘
split(separator)	지정된 구분자를 사용하여 문자열을 부분 문자열 배열로 나눠줘
trim()	문자열 시작과 끝의 공백을 제거해줘

4.2 문자열 작업의 주요 메서드

메서드 사용 예제

1. length 속성

문자열의 길이를 반환해:

JavaScript

    
      let str = 'Hello';
      console.log(str.length); // 5

2. charAt(index) 메서드

지정된 위치에 있는 문자를 반환해:

JavaScript

    
      let str = 'Hello';
      let result = str.charAt(1);
      console.log(result); // 'e'

3. toUpperCase() 및 toLowerCase() 메서드:

문자열을 대문자 또는 소문자로 변환해:

JavaScript

    
      let str = 'Hello';
      console.log(str.toUpperCase()); // 'HELLO'
      console.log(str.toLowerCase()); // 'hello'

4. indexOf(substring) 메서드

부분 문자열의 첫 번째 출현 인덱스를 반환하거나 찾을 수 없으면 -1을 반환해:

JavaScript

    
      let str = 'Hello, world!';
      let result = str.indexOf('world');
      console.log(result); // 7

5. includes(substring) 메서드

문자열이 특정 부분 문자열을 포함하고 있는지 확인하고, true 또는 false를 반환해:

JavaScript

    
      let str = 'Hello, world!';
      let result = str.includes('world');
      console.log(result); // true

6. trim() 메서드

문자열 시작과 끝의 공백을 제거해줘:

JavaScript

    
      let str = '   Hello, world!   ';
      console.log(str.trim()); // 'Hello, world!'

7. replace(searchValue, newValue) 메서드

지정된 부분 문자열을 새로운 부분 문자열로 대체해줘:

JavaScript

    
      let str = 'Hello, world!';
      console.log(str.replace('world', 'JavaScript')); // 'Hello, JavaScript!'

8. split(separator) 메서드

지정된 구분자를 사용하여 문자열을 부분 문자열 배열로 나눠줘:

JavaScript

    
      let str = 'Hello, world!';
      let words = str.split(' ');
      console.log(words); // ['Hello,', 'world!']

9. substring(start, end) 메서드

두 인덱스 사이의 부분 문자열을 반환해줘:

JavaScript

    
      let str = 'Hello, world!';
      console.log(str.substring(0, 5)); // 'Hello'

10. substr(start, length) 메서드

지정된 인덱스에서 시작하여 지정된 수의 문자 길이를 반환해줘:

JavaScript

    
      let str = 'Hello, world!';
      console.log(str.substr(0, 5)); // 'Hello'

11. slice(start, end) 메서드

문자열의 일부를 추출하여 새로운 문자열을 반환해줘:

JavaScript

    
      let str = 'Hello, world!';
      console.log(str.slice(0, 5)); // 'Hello'

12. startsWith(substring) 메서드

문자열이 특정 부분 문자열로 시작하는지 확인하고, true 또는 false를 반환해줘:

JavaScript

    
      let str = 'Hello, world!';
      console.log(str.startsWith('Hello')); // true

13. endsWith(substring) 메서드

문자열이 특정 부분 문자열로 끝나는지 확인하고, true 또는 false를 반환해줘:

JavaScript

    
      let str = 'Hello, world!';
      console.log(str.endsWith('world!')); // true

14. repeat(count) 메서드

원래 문자열을 지정된 횟수만큼 복사한 새 문자열을 반환해줘:

JavaScript

    
      let str = 'Hello';
      console.log(str.repeat(3)); // 'HelloHelloHello'

      let str2 = '-';
      console.log(str2.repeat(30)); // '---------------------------------------------------------------'

4.3 새로운 세대의 문자열

템플릿 문자열(template strings)은 최근 JavaScript에 추가됐어. 기존 문자열에 비해 더 편리하고 읽기 쉬운 방법으로 텍스트를 처리할 수 있게 해줘. 백틱(`)으로 감싸지며 표현식과 여러 줄 텍스트를 지원해.

구문:

    
      `새로운 세대의 문자열`

예제:

템플릿 리터럴 greeting이 백틱을 사용하여 생성되었어.

JavaScript

    
      const greeting = `Hello, World!`;
      console.log(greeting); // "Hello, World!"

템플릿 문자열의 주요 특징:

표현식 삽입: 템플릿 문자열은 ${}를 사용하여 문자열 내부에 표현식과 변수를 삽입할 수 있어
여러 줄 텍스트: 템플릿 문자열은 줄 바꿈 기호 없이 여러 줄 텍스트를 지원해
내장 표현식: 템플릿 문자열 내부에서는 JavaScript의 모든 표현식을 사용할 수 있으며, 함수도 포함돼

템플릿 문자열 사용 예제를 살펴보자.

표현식 삽입

템플릿 문자열은 변수의 값과 표현식의 결과를 문자열 내부에 쉽게 삽입할 수 있게 해줘:

JavaScript

    
      let name = "Alice";
      let age = 30;
      let greeting = `Hello, ${name}! You are ${age} years old.`;
      console.log(greeting); // "Hello, Alice! You are 30 years old."

이 예제에서, 변수 name과 age는 ${}를 사용하여 문자열 내부에 삽입되었어.

여러 줄 텍스트

템플릿 문자열은 줄 바꿈 기호(\n) 없이 여러 줄 문자열을 쉽게 만들 수 있어:

JavaScript

    
      let multiLine = `Lorem ipsum odor, consectetuer adipiscing elit.
      Sit lorem mattis eget maximus.`;

      console.log(multiLine);

내장 표현식

템플릿 문자열 내부에서는 JavaScript의 모든 표현식, 함수 호출까지 사용할 수 있어:

JavaScript

    
      let a = 5;
      let b = 10;
      let result = `The sum of ${a} and ${b} is ${a + b}.`;
      console.log(result); // "The sum of 5 and 10 is 15."

      function getGreeting(name) {
        return `Hello, ${name}!`;
      }

      let greeting = `${getGreeting("Bob")}`;
      console.log(greeting); // "Hello, Bob!"

물론, 문자열 내에서 함수를 호출하지 않는 게 좋지만, 정말 하고 싶다면 할 수 있어.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION