[JS-중급편-OOP] 3.문자열(String)

 

 

인간으로서 살아가면서 가장 중요한 게 아마 말, 글 아닐까요?

 

말과 글이 없다면 의사소통이 전혀 되지 않아 그것을 생각하면 아마 원시시대를 떠올리게 됩니다.

 

그래서 문득 떠오를 수 있는건 컴퓨터 세계, 더 나아가 자바스크립트 세계에서도 중요한건 말이겠죠?

 

오늘 주제는 그 말, 즉 문자열에 대해 좀 더 깊숙히 공부해 볼 예정입니다.

 

 

기초

 

말과 글을 이용해 작업할려면 단순히 코드에서 문자열을 사용하면 됩니다.

 

다음은 몇 가지 예입니다.

 

let text = "this is some text";
let moreText = 'I am in single quotes!';

alert("this is some more text");

 

문자열을 나열하는 것 외에도 종종 두 개의 문자열을 함께 결합할 수 있습니다.

 

+ 연산자를 사용하여 쉽게 할 수 있습니다.

 

let initial = "hello";
alert(initial + "world!");

alert("I can also " + "do this!");

 

위의 2가지 예에서 우리는 문자열(string)이란 걸 볼 수 있습니다.

 

이처럼 명백한 것을 지적한 이유는 문자열의 내용을 가능한 한 문자 그대로 볼 수 있고 이것이 문자열 리터럴 형태로 불리운다는 겁니다.

 

그렇다고 해서 최종 구조가 우리가 알고 있는 빌트인 타입인 문자열이라는 사실에는 변함이 없습니다.

 

아래 그림에서 text 및 moreText 문자열이 어떻게 보이는지 시각화해야한다면 다음과 같이 보일 것입니다.

 

 

 

 

위 그림을 부연 설명 하자면 리터럴 청크(literal chunk)의 텍스트를 가리키는 두 개의 변수가 있습니다.

 

다른 특이한 점은 없습니다. 여기서 간단한 문자열에 너무 자세한 시각화를 한 이유는,

 

Object 영역에 들어가면 시각화가 더 복잡해질 것이기 때문입니다.

 

문자열을 만들때 염두에 두어야 할 중요한 점은 문자열 리터럴을 더블 따옴표 (") 또는 싱글 따옴표 (')로 묶어야 한다는 겁니다.

 

그렇지 않으면 자바스크립트는 에러를 뿜어 낼 겁니다.

 

그게 기본입니다. 더 중요한 것은 JavaScript의 문자열 기능을 모두 사용해 보는겁니다.

 

다음 섹션에서 이에 대해 자세히 살펴 보겠습니다.

 

 

문자열 속성(Properties)

 

기본 String 객체에는 일반적으로 텍스트 작업을 더 쉽게 만드는 많은 속성이 있습니다.

 

다음 섹션에서는 모든 속성을 검토하지 않고 중요한 몇가지 속성에만 초점을 맞출 예정입니다.

 

개별 문자에 액세스 하기 / index, length, charAt 문자열은 하나로 응집 된 것처럼 보이지만 실제로는 일련의 문자로 구성됩니다.

 

여러 가지 방법으로 문자열의 각 캐릭터에 액세스 할 수 있는데 가장 일반적인 방법은 배열을 사용하는 것입니다.

 

let vowels = "aeiou";
alert(vowels[2]);

 

위 예에서는 배열의 두 번째 인덱스 위치에 있는 항목을 가리키고 있으며 위 문자열에서 2번째인 문자 i 를(배열은 0부터 시작) 나타냅니다.

 

좀 더 이해를 돕기 위해 다음 그림을 보시면 됩니다.

 

 

 

 

단어에서 인덱스 위치를 찾을 때 명심해야 할 것이 있습니다.

 

JavaScript의 인덱스 위치는 0에서 시작하여 1씩 증가합니다.

 

그렇기 때문에 인덱스 위치가 2이지만 해당 위치에 있는 캐릭터의 개수로는 3이 됩니다.

 

C/C++ 및 대다수의 기타 다른 언어에서도 배열의 인덱스는 0에서부터 시작합니다.

 

이제 인덱스 위치를 반복(루프)하면 문자열 배열의 전체 문자에 접근할 수 있습니다.

 

루프의 시작은 0이고 루프의 끝은 문자열의 길이에 따라 결정됩니다.

 

문자열의 길이 (일명 문자 수)는 length 속성에 의해 반환됩니다.

 

루프 실행의 예는 아래와 같습니다.

 

let vowels = "aeiou";

for (let i = 0; i < vowels.length; i++) {
	alert(vowels[i]);
}

 

루프를 돌릴때 length 속성을 사용하여 문자열에 있는 문자 개수를 가져 오는 것은 자바스크립트에서는 매우 일반적입니다.

 

배열에서 브래킷을 통한 인덱스 기법이 어려울 경우 다른 방법이 있는데 지정된 인덱스 위치에서 문자를 반환하는 charAt 메서드도 있습니다.

 

let vowels = "aeiou";
 
alert(vowels.charAt(2));

 

위 코드의 결과도 배열을 이용한 인덱스 결과와 동일합니다.

 

Internet Explorer 7과 같은 정말 오래된 브라우저에서는 브래킷을 이용한 배열 인덱싱이 안되서 부득이하게 charAt을 써야합니다.

 

개인적으로 웹 표준을 지키지 않는 Internet Explorer을 브라우저에서 퇴출되어야 한다고 생각합니다.

 

 

문자열 합치기 / +, +=, concat

두 문자열을 결합하려면 + 또는 += 연산자를 사용하면서 일련의 숫자처럼 더하면 됩니다.

 

let stringA = "I am a simple string.";
let stringB = "I am a simple string, too!";

alert(stringA + " " + stringB);

 

위 코드의 세 번째 줄에서 stringA와 stringB를 + 연산자로 더했습니다.

 

그 사이에 공백 문자 (" ")를 지정하여 stringA와 stringB 문자열이 합쳐질때 두 스트링 사이에 공백을 추가했습니다.

 

문자열 프리미티브(primitive)와 문자열 객체(object)에도 위의 + 연산자 및 += 연산자는 동일하게 적용됩니다.

 

아래 예를 보십시요.

 

let textA = "Please"
let textB = new String("stop!");
let combined = textA + " make it " + textB;

alert(combined);

 

textA는 문자열 프리미티브(primitive)이며, textB는 문자열 객체(object)입니다.

 

그런데 두 문자열이 믹싱됐음에도 불구하고 combined 변수의 유형은 여전히 문자열 프리미티브(primitive)입니다.

 

문자열을 결합하는 방법에는 concat 메서드도 있습니다.

 

임의의 문자열에서 concat 메서드를 호출하고 그 인수로 지정할 거는 결합하려는 문자열 프리미티브, 문자열 리터럴 또는 문자열 객체를 지정하면 됩니다.

 

let foo = "I really";
let blah = "why anybody would";
let blarg = "do this";

let result = foo.concat(" don't know", " ", blah, " ", blarg);

alert(result);

 

문자열을 결합하기 위해 되도록이면 + 연산자 또는 += 연산자를 사용하십시오.

 

concat 방식보다 빠릅니다.

 

다른 모든 것이 동일하면 코드에서는 속도가 제일 중요합니다.

 

문자열에서 부분만 발췌하기 / slice, substr 코드를 짜다 보면 문자열 중간 어딘가에 있는 특정 문자 또는 문자열이 필요할 때가 있습니다.

 

이를 위해 필요한 메서드는 slice와 substr이 있습니다.

 

다음 문자열이 있다고 가정 해 보겠습니다.

 

let theBigString = "Pulp Fiction is an awesome movie!";

 

위 문자열로 조금 테스트 해볼까요?

 

 

slice 메서드

 

slice 메서드를 사용하여 시작 위치와 끝 위치만 알려주면 우리가 추출할려고 하는 문자열을 리턴 받을 수 있습니다.

 

let theBigString = "Pulp Fiction is an awesome movie!";

alert(theBigString.slice(0, 12)); // Pulp Fiction

 

이 예제에서는 인덱스 위치 0과 12 사이의 문자를 추출합니다.

 

최종 결과는 Pulp Fiction이라는 단어가 반환됩니다.

 

시작 위치와 끝 위치 값은 양수일 필요가 없습니다.

 

끝 위치에 음수 값을 지정하면 문자열의 끝 위치는 끝에서 거꾸로 계산할 때 남는 위치입니다.

 

let theBigString = "Pulp Fiction is an awesome movie!";

alert(theBigString.slice(0, -6)); // Pulp Fiction is an awesome

 

음수 시작 위치를 지정하는 경우 시작 위치는 문자열의 끝에서 시작하여 지정한 개수입니다.

 

let theBigString = "Pulp Fiction is an awesome movie!";

alert(theBigString.slice(-14, -7)); // awesome

 

슬라이스 메서드를 사용하는 방법에 대한 세 가지 변형을 방금 보았습니다.

 

되도록이면 양수로 시작위치와 끝 위치를 지정하는 방법이 가장 좋을 듯 싶습니다. 헷갈리지 않게 말입니다.

 

 

substr 메서드

 

문자열 분할을 위해 마지막으로 살펴볼 방법은 substr 메서드입니다.

 

이 메서드는 두 개의 인수를 받습니다.

 

let newString = substr(start, length);

 

첫 번째 인수는 시작 위치를 지정하는 숫자이고 두 번째 인수는 분할하려는 문자열의 길이를 지정하는 숫자입니다.

 

몇 가지 예를 살펴보면 이해하기 더 쉽습니다.

 

let theBigString = "Pulp Fiction is an awesome movie!";

alert(theBigString.substr(0, 4)); // Pulp

 

우리는 0번째 위치를 분할하려는 문자열의 시작으로 지정했고 4 개의 문자를 분할한다고 지정했습니다.

 

이것이 "Pulp"가 반환된 이유입니다. "Fiction"이라는 단어를 추출하려는 경우의 코드는 다음과 같습니다.

 

let theBigString = "Pulp Fiction is an awesome movie!";

alert(theBigString.substr(5, 7)); // Fiction

 

두번째 인수인 길이를 지정하지 않으면 반환되는 문자열은 시작 위치에서 끝까지에 해당되는 문자열입니다.

 

let theBigString = "Pulp Fiction is an awesome movie!";

alert(theBigString.substr(5)); // Fiction is an awesome movie!

 

substr에 전달할 수 있는 인수의 여러가지 예가 있는 이 방법만 알아도 코드 짜는데 큰 문제가 없습니다.

 

 

 

 

 

문자열 분할하기 / split

 

문자열을 연결할 수 있으면 반대로 분리도 할 수 있습니다.

 

문자열을 분리하는 방법은 split 메서드를 사용하면 됩니다.

 

문자열에서 이 메서드를 호출하면 서브문자열 배열이 반환됩니다.

 

이러한 서브문자열은 때로는 어떤 문자로 구분되고 또는 정규식(일명 RegEx)로 구분됩니다.

 

간단한 예를 살펴 보겠습니다.

 

let inspirationalQuote = "That which you can concatenate, you can also split apart.";

let splitWords = inspirationalQuote.split(" ");
alert(splitWords.length); // 10

 

이 예에서는 inspirationalQuote 텍스트를 공백 문자(" ")로 분할합니다.

 

공백 문자가 발견되면 그때까지의 문자열이 제거되고 자동으로 배열에 추가되며 다음 공백 문자가 발견되면 또 아까 배열에 추가되고,

 

이런 방식으로 끝까지 루프를 돌고 최종적으로 아까 그 배열을 리턴합니다.

 

여기 다른 예가 있습니다.

 

let days = "Monday,Tuesday,Wednesday,Thursday,Friday,Saturday,Sunday";

let splitWords = days.split(",");
alert(splitWords[6]); // Sunday

 

쉼표로만 구분 된 날짜 문자열을 저장하는 days 변수가 있습니다.

 

각각으로 분리하고 싶다면 구분 문자를 쉼표로 사용하여 split 메서드를 사용할 수 있습니다.

 

최종 결과는 각 항목이 원래 문자열의 요일 인 7 개 항목의 배열이 됩니다.

 

위 문장처럼 단순하거나 또는 웹 서비스에서 반환 된 데이터와 같이 복잡한 문자 시퀀스를 분리하기 위해 아마도 여러분들은 split 메서드를 자주 사용하게 될겁니다.

 

문자열에서 무언가를 찾기 / indexOf, lastIndexOf, match 문자열 내에서 문자를 찾아야하는 경우 indexOf, lastIndexOf 및 match 메서드를 사용할 수 있습니다.

 

먼저 indexOf 메서드를 살펴 보겠습니다.

 

indexOf 메서드가 하는 일은 찾고자 하는 문자를 인수로 취하는 것입니다.

 

찾고 있는 것이 발견되면 문자열에서 첫 번째 일치가 발생하는 인덱스 위치를 반환합니다.

 

일치하는 항목이 없으면 -1을 제공합니다. 예를 들어 보겠습니다.

 

let question = "I wonder what the pigs did to make these birds so angry?";

alert(question.indexOf("pigs")); // 18

 

위 예에서 question 문자열에서 "pigs"가 있는지 확인하려고 합니다.

 

내가 찾고있는 것이 존재하기 때문에 indexOf 메서드는 이 단어의 첫 번째 일치가 18 번째 인덱스 위치에서 발생 함을 알려줍니다.

 

이 예제에서 "z"와 같이 존재하지 않는 것을 찾으면 -1이 반환되는 것을 볼 수 있습니다.

 

let question = "I wonder what the pigs did to make these birds so angry?";

alert(question.indexOf("z")); // -1

 

lastIndexOf 메서드는 indexOf와 매우 유사합니다. 

 

이름으로 짐작할 수 있듯이 lastIndexOf는 찾고있는 항목의 마지막 항목을 반환합니다.

 

let question = "How much wood could a woodchuck chuck if a woodchuck could chuck wood?";

alert(question.lastIndexOf("wood")); // 65

 

 

indexOf 및 lastIndexOf 모두에 지정할 수 있는 인수가 하나 더 있습니다.

 

검색 할 문자를 제공하는 것 외에도 검색을 시작할 문자열의 인덱스 위치를 지정할 수도 있습니다.

 

let question = "How much wood could a woodchuck chuck if a woodchuck could chuck wood?";

alert(question.indexOf("wood", 30)); // 43

 

위 예제처럼 왜 그렇게 하려고 하는지 모르겠지만, 원한다면 위와 같이 할 수도 있습니다.

 

indexOf 및 lastIndexOf 메서드에 대해 마지막으로 언급 할 사항은 문자열에 나타나는 어떤 문자 인스턴스와도 매치한다는 것입니다.

 

이 함수는 전체 단어나 그 단어의 일부분인 서브문자열을 구별하여 매치하지 않습니다.

 

이 점 고려하십시오.

 

마무리하기 전에 match 메서드를 살펴 보겠습니다.

 

match 메서드를 사용하면 좀 더 쉽게 제어 할 수 있습니다.

 

이 메서드는 정규식을 인수로 사용합니다.

 

let phrase = "There are 3 little pigs.";
let regexp = /[0-9]/;

let numbers = phrase.match(regexp);

alert(numbers[0]); // 3

 

반환되는 것은 정규식 검색 조건에 일치하는 서브문자열의 배열이므로 배열 인덱스 방법을 사용하여 결과를 쉽게 처리 할 수 있습니다.

 

정규 표현식으로 작업하는 방법은 나중에 살펴볼 것입니다.

 

문자열을 대문자로(또는 소문자로) / toUpperCase, toLowerCase 마지막으로, 문자열을 대문자 또는 소문자로 변환하려면 toUpperCase 및 toLowerCase 메서드를 사용할 수 있습니다.

 

이 예를 살펴 보겠습니다.

 

let phrase = "My name is Bond. James Bond.";

alert(phrase.toUpperCase()); // MY NAME IS BOND. JAMES BOND.
alert(phrase.toLowerCase()); // my name is bond. james bond.

 

위 메서드는 이해하기 쉬울 겁니다.

 

 

결론

문자열은 JavaScript에서 사용할 수 있는 몇 가지 기본 데이터 타입 중 하나이며 이를 사용하여 수행 할 수 있는 많은 작업에 대해 알아 보았습니다.

 

여기서 한 가지 문제는 문자열 프리미티브(primitive)가 객체(object)에만 공통되는 이러한 모든 속성을 신비하게도 모두 가지고 있는 것처럼 보이는 것입니다.

 

이 문제는 좀 더 나중에 알아 보겠습니다.

 

일단 오늘까지 자바스크립트의 문자열에 대해 기본적인 사용법을 배웠습니다.

 

다음 편에서는 문자열과 변수를 결합하는 방법에 대해 알아보겠습니다.