분류 javascript

JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법 - JavaScript guide

컨텐츠 정보

  • 조회 142 (작성일 )

본문

목차​

  1. JavaScript 개발자 콘솔을 사용하는 방법
  2. HTML에 JavaScript를 추가하는 방법
  3. JavaScript에서 구문 및 코드 구조 이해
  4. JavaScript로 주석을 작성하는 방법
  5. JavaScript에서 데이터 유형 이해
  6. JavaScript에서 문자열로 작업하는 방법
  7. JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법
  8. JavaScript에서 데이터 유형을 변환하는 방법
  9. JavaScript에서 변수, 범위 및 게양 이해
  10. 연산자를 사용하여 JavaScript에서 수학을 수행하는 방법
  11. JavaScript에서 배열 이해
  12. JavaScript에서 배열 메서드를 사용하는 방법 : Mutator 메서드
  13. JavaScript에서 배열 메서드를 사용하는 방법 : Accessor 메서드
  14. JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드
  15. JavaScript에서 객체 이해
  16. JavaScript에서 날짜 및 시간 이해
  17. JavaScript에서 이벤트 이해
  18. JavaScript에서 JSON으로 작업하는 방법
  19. JavaScript로 조건문을 작성하는 방법
  20. JavaScript에서 Switch 문을 사용하는 방법
  21. JavaScript에서 While 및 Do ... While 루프 사용
  22. JavaScript에서 For 루프를 생성하는 방법
  23. JavaScript에서 함수를 정의하는 방법
  24. JavaScript의 프로토 타입 및 상속 이해
  25. JavaScript에서 클래스 이해
  26. JavaScript에서 객체 메소드를 사용하는 방법
  27. JavaScript에서 This, Bind, Call 및 Apply 이해

JavaScript에서 문자열을 인덱싱, 분할 및 조작하는 방법 


소개 


문자열은 문자, 숫자 또는 기호로 구성 될 수 있는 하나 이상의 문자 시퀀스입니다. JavaScript 문자열의 각 문자는 색인 번호로 액세스 할 수 있으며 모든 문자열에는 사용 가능한 메소드 및 특성이 있습니다.


이 튜토리얼에서는 문자열 프리미티브와 String 객체의 차이점, 문자열 색인 생성 방법, 문자열의 문자에 액세스하는 방법, 문자열에 사용되는 공통 속성 및 메서드에 대해 알아 봅니다.


https://www.digitalocean.com/community/tutorials/how-to-index-split-and-manipulate-strings-in-javascript 


문자열 프리미티브와 문자열 객체 


먼저 두 가지 유형의 문자열을 설명합니다. JavaScript는 문자열 기본 요소, 변경 불가능한 데이터 유형 및 문자열 오브젝트를 구별합니다.


이 둘의 차이점을 테스트하기 위해 문자열 프리미티브와 문자열 객체를 초기화합니다.

// Initializing a new string primitive
const stringPrimitive = "A new string.";

// Initializing a new String object
const stringObject = new String("A new string.");  

typeof 연산자를 사용하여 값의 유형을 결정할 수 있습니다. 첫 번째 예에서는 단순히 문자열을 변수에 할당했습니다.


typeof stringPrimitive;
Output
string

두 번째 예에서는 new String()을 사용하여 문자열 객체를 만들고 변수에 할당했습니다.


typeof stringObject;
Output
object

대부분의 경우 문자열 프리미티브를 작성합니다. JavaScript는 객체로 만든 문자열 프리미티브를 실제로 변경하지 않고도 String 객체 래퍼의 내장 속성 및 메서드에 액세스하고 활용할 수 있습니다.

이 개념은 처음에는 약간 까다로울 수 있지만 기본과 객체의 차이점을 알고 있어야 합니다. 기본적으로 모든 문자열에 사용할 수 있는 메소드 및 특성이 있으며 백그라운드에서 JavaScript는 메소드 또는 특성이 호출 될 때마다 오브젝트로 변환 한 후 기본으로 다시 변환합니다.


문자열을 인덱싱하는 방법 


문자열의 각 문자는 0으로 시작하는 색인 ​​번호에 해당합니다.


시연을 위해 How are you?라는 값으로 문자열을 만듭니다.


Howareyou?
01234567891011

문자열의 첫 번째 문자는 H이며 인덱스 0에 해당합니다. 마지막 문자는?이며 11에 해당합니다. 공백 문자에도 3과 7의 인덱스가 있습니다.


문자열의 모든 문자에 액세스 할 수 있으면 문자열을 다루고 조작 할 수 있는 여러 가지 방법이 있습니다.


캐릭터 접근 


How are you?를 통해 캐릭터와 인덱스에 액세스하는 방법을 보여 드리겠습니다. 

"How are you?";

대괄호 표기법을 사용하여 문자열의 모든 문자에 액세스 할 수 있습니다.


"How are you?"[5];
Output
r

charAt() 메소드를 사용하여 색인 번호를 매개 변수로 사용하여 문자를 리턴 할 수도 있습니다.


"How are you?".charAt(5);
Output
r

또는 indexOf()를 사용하여 문자의 첫 번째 인스턴스에서 색인 번호를 반환 할 수 있습니다.


"How are you?".indexOf("o");
Output
1

"o"는 How are you? string, indexOf()는 첫 번째 인스턴스를 가져옵니다.


lastIndexOf()는 마지막 인스턴스를 찾는 데 사용됩니다.


"How are you?".lastIndexOf("o");
Output
9

이 두 가지 방법 모두 문자열에서 여러 문자를 검색 할 수도 있습니다. 인스턴스에서 첫 번째 문자의 인덱스 번호를 반환합니다.


"How are you?".indexOf("are");
Output
4

반면에 slice() 메서드는 두 인덱스 번호 사이의 문자를 반환합니다. 첫 번째 매개 변수는 시작 색인 번호이고 두 번째 매개 변수는 종료해야 하는 색인 ​​번호입니다.

"How are you?".slice(8, 11);
Output
you

11은?이지만? 반환 된 출력의 일부가 아닙니다. slice()는 마지막 매개 변수를 포함하지만 포함하지 않은 것을 반환합니다.


두 번째 매개 변수가 포함되지 않은 경우 slice()는 매개 변수에서 문자열 끝까지 모든 것을 반환합니다.


"How are you?".slice(8);
Output
you?

요약하면 charAt() 및 slice()는 색인 번호를 기반으로 문자열 값을 반환하는 데 도움이 되고 indexOf() 및 lastIndexOf()는 반대로 제공된 문자열 문자를 기반으로 색인 번호를 반환합니다.


문자열의 길이 찾기 


length 속성을 사용하면 문자열의 문자 수를 반환 할 수 있습니다.

"How are you?".length;
Output
12

length 속성은 0으로 시작하고 11로 끝나는 최종 색인 번호가 아니라 12로 나오는 1로 시작하는 실제 문자 수를 반환합니다.


대문자 또는 소문자로 변환 


내장 된 toUpperCase() 및 toLowerCase() 메서드는 JavaScript에서 텍스트의 서식을 지정하고 텍스트를 비교하는 데 유용한 방법입니다.


toUpperCase()는 모든 문자를 대문자로 변환합니다.


"How are you?".toUpperCase();
Output
HOW ARE YOU?

toLowerCase()는 모든 문자를 소문자로 변환합니다.


"How are you?".toLowerCase();
Output
how are you?

이 두 가지 형식화 방법에는 추가 매개 변수가 없습니다.


이러한 메소드는 원래 문자열을 변경하지 않습니다.


문자열 나누기 


JavaScript에는 문자열을 문자로 나누고 섹션에서 새 배열을 만드는 데 유용한 방법이 있습니다. split() 메소드를 사용하여 배열을 ""로 표시되는 공백 문자로 분리합니다.

const originalString = "How are you?";

// Split string by whitespace character
const splitString = originalString.split(" ");

console.log(splitString);
Output
[ 'How', 'are', 'you?' ]

splitString 변수에 새로운 배열이 생겼으므로 인덱스 번호로 각 섹션에 액세스 할 수 있습니다.


splitString[1];
Output
are

빈 매개 변수가 제공되면 split()은 문자열의 각 문자로 쉼표로 구분 된 배열을 만듭니다.


문자열을 나누면 문장에 몇 단어가 있는지 확인할 수 있으며 이 방법을 사용하여 사람들의 이름과 성을 확인할 수 있습니다.


공백 잘라 내기 


JavaScript trim() 메서드는 문자열의 양쪽 끝에서 공백을 제거하지만 그 사이의 공백은 제거하지 않습니다. 공백은 탭 또는 공백 일 수 있습니다.


const tooMuchWhitespace = "     How are you?     ";

const trimmed = tooMuchWhitespace.trim();

console.log(trimmed);
Output
How are you?

trim() 메서드는 과도한 공백을 제거하는 일반적인 작업을 수행하는 간단한 방법입니다.


문자열 값 찾기 및 바꾸기 


문자열에서 값을 검색하고 replace() 메서드를 사용하여 새 값으로 바꿀 수 있습니다. 첫 번째 매개 변수는 찾은 값이고 두 번째 매개 변수는 이를 대체 할 값입니다.

const originalString = "How are you?"

// Replace the first instance of "How" with "Where"
const newString = originalString.replace("How", "Where");

console.log(newString);
Output
Where are you?

값을 다른 문자열 값으로 바꾸는 것 외에도 정규 표현식을 사용하여 replace()를 더 강력하게 만들 수 있습니다. 예를 들어 replace()는 첫 번째 값에만 영향을 주지만 g (전역) 플래그를 사용하여 값의 모든 인스턴스를 포착하고 i (대소 문자 구분) 플래그를 사용하여 대소 문자를 무시할 수 있습니다.


const originalString = "Javascript is a programming language. I'm learning javascript."

// Search string for "javascript" and replace with "JavaScript"
const newString = originalString.replace(/javascript/gi, "JavaScript");

console.log(newString);
Output
JavaScript is a programming language. I'm learning JavaScript.

이것은 정규 표현식을 사용하는 매우 일반적인 작업입니다. Regexr을 방문하여 더 많은 RegEx 예제를 연습하십시오.


결론 


문자열은 가장 빈번하게 사용되는 데이터 형식 중 하나이며 이를 통해 많은 작업을 수행 할 수 있습니다.


이 학습서에서는 문자열 기본 요소와 문자열 오브젝트의 차이점, 문자열 색인화 방법 및 문자열에 내장 된 메소드 및 특성을 사용하여 문자에 액세스하고 텍스트를 형식화 하며 값을 찾고 바꾸는 방법을 학습했습니다.