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

소개

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

이 자습서에서는 문자열 프리미티브와 String 개체 간의 차이점, 문자열 색인 생성 방법, 문자열의 문자에 액세스하는 방법, 문자열에 사용되는 일반적인 속성 및 메서드에 대해 알아봅니다.

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

먼저 두 가지 유형의 문자열을 명확히 하겠습니다. JavaScript는 문자열 프리미티브, 불변 데이터 유형 및 String 개체를 구분합니다.

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

// 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? 값이 있는 문자열을 생성합니다.

문자열의 첫 번째 문자는 0 인덱스에 해당하는 H입니다. 마지막 문자는 ?이며 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? 문자열에 두 번 나타나지만 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에서 시작하여 <에서 끝나는 최종 인덱스 번호가 아니라 1로 시작하여 12가 나오는 실제 문자 수를 반환한다는 점을 기억하세요. 코드>11.

대문자 또는 소문자로 변환

두 가지 기본 제공 메서드 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.

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

결론

문자열은 가장 자주 사용되는 데이터 유형 중 하나이며 문자열로 할 수 있는 일이 많습니다.

이 자습서에서는 문자열 프리미티브와 String 개체 간의 차이점, 문자열이 인덱싱되는 방법, 문자열의 기본 제공 메서드 및 속성을 사용하여 문자에 액세스하고 텍스트 형식을 지정하고 찾는 방법을 배웠습니다. 값을 바꿉니다.

문자열에 대한 보다 일반적인 개요는 \JavaScript에서 문자열로 작업하는 방법\ 튜토리얼을 읽어보세요.