자바스크립트 완벽가이드 - 3.2 문자열

문자열(string)은 Unicode 문자나 숫자, 문장부호들의 시퀀스로 텍스트를 표현하는 자바스크립트 데이터 타입이다. 곧 살펴보겠지만 여러분은 프로그램 내에 작은따옴표 혹은 큰따옴표 쌍으로 문자열을 둘러싸서 문자열리터럴을 포함시킬 수 있다.

 

자바스크립트는 C나 C++, 자바와는 다르게 char 같은 문자 데이터 타입을 가지고 있지 않다는 것을

유념하라. 단일 문자를 표현하려면 간단히 길이가 1인 문자열을 사용하면 된다.

 

 

1. 문자열과 리터럴

 

문자열은 0개 또는 하나 이상의 Unicode 문자들이 작은따옴표 혹은 큰따옴표('혹은 ")로 둘러싸인 시퀀스다. 큰따옴표로 둘러싸인 문자들은 작은따옴표로 둘러싸인 문자열 내에 포함될 수 있으며 작은따옴표로 둘러싸인 문자들은 큰따옴표로 둘러싸인 문자열 내에 포함될 수 있다. 문자열 리터럴은 한 줄을 넘지 말아야 한다.

 

문자열 리터럴 내에 줄바꿈 문자(newline)를 포함시키고 싶다면 다음 절에서 상세히 설명할 문자 시퀀스인 \n을 사용하라. 다음은 몇 가지 문자열 리터럴을 보여 준다.

 

"" // 빈 문자열: 문자가 없다.
'testing'
"3.14"
'name="myform"'
"wouldn't you prefer O'Reilly's book?"
"This string\nhas two lines" // 두 줄짜리 문자열
" π is the ratio of a circle's circumference to its diameter"

앞의 예에서 마지막에 나온 문자열에서 볼 수 있듯이 ECMAScript v1 표준에 의하면 문자열 리터럴 내에 Unicode 문자를 사용할 수 있다. 그러나 자바스크립트 1.3보다 이전 버전의 구현에서는 일반적으로

문자열 내에 ASCⅡ 문자나 Latin-1 문자만을 사용할 수 있게 제한한다. 다음 절에서 설명할 것이지만

여러분은 특별한 이스케이프 시퀀스(escape sequence)를 사용하여 문자열 리터럴 내에 Unicode 문자를

포함시킬 수 있다. 이 방법은 텍스트 편집기에서 Unicode를 온전히 지원하지 않을 때 유용하게 사용할 수

있다. 문자열 경계를 작은따옴표로 둘러싸는 경우 can't나 O'Reilly's 같은 영어 축약형이나 소유격 사용 주의해야한다. 영어의 생략 부호와 작은 따옴표가 동일한 문자이기 때문에 작은따옴표로 둘러싸인 문자열 내에 생략 부호가 나타날 경우 생략 부호를 살리기 위해 역슬래시(\)를 사용해야 한다. (여기에 관해서는 다음 절에서 자세히 설명한다.)

클라이언트 측 자바스크립트 프로그램에서 자바스크립트 코드는 때때로 HTML코드를 담고 있는 문자열을 포함하고 반대로 HTML 코드는 자바스크립트 코드를 담고 있는 문자열을 포함하곤 한다. 자바스크립트처럼 HTML도 문자열 경계를 표시하는데 작은따옴표나 큰따옴표를 사용한다. 따라서 자바스크립트와 HTML을 섞어서 사용할 때는 자바스크립트 코드에서 작은따옴표나 큰따옴표 중 하나를 사용하고 HTML 코드에서 나머지 하나를 사용하는 것이 좋다. 다음 예에서 문자열 'Thank you'는 자바스크립트 표현식 내에서 작은따옴표로 둘러싸여 있고 이것은 다시 HTML 이벤트 처리기 어트리뷰트 내에서 큰따옴표로 둘러싸여 있다.

 

<a href=" " onclick="alert!('Thank you')">Click Me</a>

 

 

 

2. 문자 리터럴 내 이스케이프 시퀀스

 

역슬래시 문자(\)는 자바스크립트 문자열에서 특별한 목적을 위해 사용된다. 역슬래시 문자는 뒤따라 나오는 문자와 결합될 경우 다른 방식으로는 표현할 수 없는 문자를 표현한다. 예를 들어, \n은 줄바꿈 문자를 나타내는 이스케이프 시퀀스이다.^[각주:1]
또 다른 예로는 이전 절에서 언급된 바 있는 \' 이스케이프 시퀀스가 있으며 이 이스케이프 시퀀스는 작은따옴표(혹은 영어 축약형) 문자를 나타낸다. 이 이스케이프 시퀀스는 작은따옴표로 둘러싸인 문자열 리터럴 내에 작은따옴표 문자를 포함시켜야 할 때 유용하게 사용할 수 있다. 여러분은 이제 왜 이러한 것들을 이스케이프 시퀀스라 부르는지 알 수 있을 것이다. 즉, 역슬래시는 작은따옴표 문자를 일반적인 해석 방식에서 벗어나 특수한 방식으로 해석하게 만든다.^[각주:2] 다음과 같이 역슬래시를 사용하면 작은따옴표가 문자열의 끝을 나타내는 것이 아니라 영어 축약형 문자를 나타내게 만들 수 있다.

 

'You\'re right, it can\'t be a quote'

표 3-2는 자바스크립트 이스케이프 시퀀스들과 각 이스케이프 시퀀스가 나타내는 문자를 보여준다.

 

이 중 \x와 \u로 시작하는 두 이스케이프 시퀀스는, 16진수로 지정한 Latin-1 문자 코드나 Unicode 문자

코드를 어떠한 문자로도 표현할 수 있는 범용적인 이스케이프 시퀀스다. 예를 들어, 시퀀스 \xA9는 Latin-1 인코딩으로 표현할 때 16진수 A9로 표현되는 저작권 기호를 나타낸다. 비슷하게, \u 이스케이프 시퀀스는

네 개의 16진수 숫자로 표현되는 Unicode 문자를 나타낸다. 예를들어, \u03c0은 문자 파이(π)를 나타낸다.

 

ECMAScript v1 표준에서는 Unicode 이스케이프 시퀀스 지원을 필수로 규정하고 있지만 자바스크립트 1.3 이전 구현에서는 잘 지원되지 않음을 유의하라. 몇몇 자바스크립트 구현에서는 역슬래시 뒤에 세 개의 8진수 값을 지정하여 Latin-1 문자를 표현하는 방법을 제공하지만, ECMAScript v3 표준은 이 이스케이프 시퀀스를

지원하지 않으므로 이 시퀀스는 더 이상 사용하지 말아야 한다.

마지막으로, 역슬래시 이스케이프 시퀀스는 두 줄로 된 문자열이나 기타 자바스크립트 토큰을 한 줄로 잇기 위해 줄이 나누어지는 부분 바로 앞에서 사용한다거나, 문자열 내에 줄나눔 문자 그 자체를 포함시키기 위해 사용할 수 없다는 것을 유의하라. 만약 \ 문자가 표 3-2에 나온 문자들 이외의 문자 앞에 사용될 경우

역슬래시는 그냥 무시된다(물론 자바스크립트 추후 버전에서 새로운 이스케이프 시퀀스를 정의할 수도 있다).

예를 들면, \#는 #와 같다.

표3-2 자바스크립트 이스케이프 시퀀스들

---

시퀀스              표현하는 문자

---

\0                       널 문자(\u0000).
\b                       백스페이스(\u0008).
\t                        수평 탭(\u0009).
\n                       줄바꿈 문자(\u000A).
\v                       수직 탭(\u000B).
\f                        폼 피드(\u000C).
\r                        캐리지 리턴(\u000D).
\"                        큰따옴표(\u0022).
\'                        작은따옴표(\u0027).
\\                      역슬래시(\u005C).
\xXX                   두 개의 16진수 숫자 XX에 의해 지정되는 Latin-1 문자
\uXXXX               네 개의 16진수 숫자 XXXX에 의해 지정되는 Unicode 문자.
\XXX                   1과 377 사이의 8진수 숫자 XXX에 의해 지정되는 Latin-1 문자.
                            ECMAScript v3에서 지원하지 않는다. 이 이스케이프 시퀀스는 사용하지 말라.

---

1. C나,C++,자바 프로그래머들은 이미 이 시퀀스나 다른 자바스크립트 이스케이프 시퀀스에 익숙할 것이다. [본문으로]
2. (역자 주) 이스케이프(escape)는 '탈출' 또는 '벗어남' 이라는 의미이다. [본문으로] 

 

 

3. 문자열 조작

 

자바스크립트가 지원하는 기본 기능 중 하나는 여러 문자열을 이어붙이는 것이다. 숫자에 + 연산자를 적용하면 숫자들이 더해진다. 그러나 문자열에 적용하면 두 번째 문자열을 첫 번째 문자열에 이어 붙여 두 문자열을 합친다.

 

예를 들어,

msg = "Hello, " + "world"; // 'Hello, world' 문자열을 생성한다.
greeting = "Welcome to my blog, " + " " + name;

문자열 길이(문자열에 포함된 문자 개수)를 알고 싶으면 문자열의 length 프로퍼티를 사용하면 된다.

만약 변수 s가 문자열을 담고 있다면 다음과 같이 문자열의 길이를 알아낼 수 있다.

 

s.length

여러분은 몇 가지 문자열과 관련된 메서드도 사용할 수 있다.

예를 들어, 문자열 s의 마지막 문자를 가져 오려면,

last_char = s.charAt(s.length - 1);

문자열 s에서 두 번째, 세 번째, 네 번째 문자를 추출하려면,

sub = s.substring(1,4);

문자열 s 내에서 첫 번째 'a' 문자의 위치를 찾아내려면,

i = s.indexOf('a');

이 외에도 문자열 조작에 사용할 수 있는 여러 다른 메서드들이 있다.

이 메서드들에 관한 자세한 설명은 3부에 있는 String 객체의 레퍼런스에서 찾을 수 있다.
앞선 예들을 통해 알 수 있듯이, 자바스크립트 문자열(그리고 이후에 알아볼 테지만 자바스크립트 배열도)은 0부터 인덱스가 시작한다. 즉, 문자열 내에서첫 번째 문자는 0 번째 인덱스다. C나 C++, 자바 프로그래머들은 이러한 인덱스와 관련된 관습에 익숙할 테지만, 1부터 인덱스가 시작하는 문자열이나 배열에 익숙한 이들은 이 관습에 익숙해지는 데 시간이 좀 걸릴 것이다.

몇몇 자바스크립트 구현에서는 배열 표기법을 사용해서 문자열 내 개별 문자를 읽을 수 있게 지원한다.

따라서 앞선 charAt()에 대한 호출을 다음과 같이 재작성 할 수 있다.

last_char = s[s.length - 1];

이 표기법은 ECMAScript v3 표준이 아니고 다른 자바스크립트 버전과 호환되지 않으므로 사용하지 말아야 한다. 나중에 객체 데이터 타입에 관해 논의할 때 객체 프로퍼티와 메서드가, 앞의 문자열에서 문자열 프로퍼티와 메서드가 사용되는 방식과 동일한 방식으로 사용되는 것을 보게 될 것이다. 그렇다고 해서 문자열이 객체 타입이라는 말은 아니다. 사실 문자열은 객체와는 별개의 타입니다. 문자열에 대해 객체 프로퍼티와 메서드에 접근하는 문법을 그대로 사용할 수 있기는 하지만 문자열 자체가 객체는 아니다. 이장의 끝 부분에서 왜 그러한지 알게 될 것이다. 

 

 

 

4. 숫자를 문자로 변환하기

 

숫자는 필요할 때 문자열로 자동으로 변환된다.

문자열을 이어붙이는 표현식에서 숫자가 사용될 경우 숫자는 먼저 문자열로 변환된다.

var n = 100;
var s = n + " bottles of beer on the wall.";

이러한 이어붙이기를 통한 변환 기능은 여러분이 종종 보게 될 관용적으로 사용되는 코드를 만들어 냈다.

숫자를 문자열로 변환하려면 간단시 숫자에 빈 문자열을 더하면 된다.

var n_as_string = n + "";

명시적으로 숫자를 문자열로 변환하려면 String() 함수를 사용한다.

var string_value = String(number);

숫자를 문자열로 변환하는 다른 기법으로 toString() 메서드를 사용하는 방법이 있다.

string_value = number.toString();

Number 객체의 toString() 메서드는 (기본 데이터 타입인 숫자는 이 메서드가 호출될 수 있도록 자동으로 Number 객체로 변환된다) 변환에 사용할 기수^[각주:1]를 지정하는, 생략 가능한 전달인자를 받는다. 전달인자를 지정하지 않으면 10을 기수로 한 변환이 수행된다. 그러나 다른 기수(2와 36 사이에 있는)를 사용하여 숫자를 변환 할 수도 있다.^[각주:2] 예를 들어, 다음은 toString() 메서드의 사용 예를 몇 가지 보여 준다.

 

var n = 17;
binary_string = n.toString(2);                    // "10001"로 평가된다.
octal_string = "0" + n.toString(8);               // "021"로 평가된다.
hex_string = "0x" + n.toString(16);             // "0x11"로 평가된다.

자바스크립트 1.5 이전 버전에서는 숫자를 문자열로 변환할 때, 문자열에 포함 될 소수점 자리 수나

지수 표기법 사용 여부 등을 지정할 수 있는 방법이 없었다. 때문에 화폐 형식과 같이 전통적으로 많이

사용해 오던 형식으로 숫자를 출력하는 데 어려움이 있었다.

ECMAScript v3과 자바스크립트 1.5는 Number 클래스에 세 가지 새로운 숫자/문자 변환 메서드를 추가하여 이 문제를 해결하였다. toFixed()는 숫자를 문자열로 변환하면서 소수점 이하를 지정된 개수만큼만 출력한다. 이 메서드는 지수표기법을 사용하지는 않는다. toExponential()은 소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성되는 지수 표기법을 사용하여 숫자를 문자열로 변환한다. toPrecision()은 지정된 수의 유효 숫자 개수만큼 숫자를 출력한다. 만약 유효 숫자 개수가 숫자의 정수 부분 전체를 출력하기에 충분히 크지 않을 경우에는 지주 표기법이 사용된다. 이 세가지 메서드 모두 결과 문자열 내에서 나머지 숫자들을 적절히 반올림한다는 것을 유의하라. 다음 예들을 살펴보자.

 

var n = 123456.789;
n.toFixed(0);                    // "123456"
n.toFixed(2);                    // "123456.79"
n.toExponential(1);           // "1.2e+5"
n.toExponential(3);           // "1.235e+5"
n.toPrecision(4);              // "1.235e+5"
n.toPrecision(7);              // "123456.8"

1. (역자 주) 기수는 특정 기수법(記數法)에서 수치를 표기하는 데 사용되는 숫자의 수를 의미한다. 예를 들면, 2진법에서는 2, 10진법에서는 10, 8진법에서는 8, 그리고 16진법에서는 16이 기수다. 더 자세한 사항은 다음의 위키백과를 참조하라. http://ko.wikipedia.org/wiki/기수법 [본문으로]
2. ECMAScript 명세는 기수 전달인자를 받는 toString() 메서드를 지원하지만, 10 이외의 기수가 사용될 경우 구현 나름대로의 문자열을 반환할 수 있게 허용한다. 그러므로 표준을 준수하는 구현이라고 하더라도 간단히 기수 전달인자를 무시하고 항상 10을 기수로 하는 결과를 반환할 수 있다. 그렇지만 실제로는 대부분의 구현들이 주어진 기수에 맞게 변환을 수행한다. [본문으로]

 

 

 

5. 문자를 숫자로 변환하기

 

문자열이 숫자 문맥에 사용되면 자동으로 숫자로 변환된다.

이것은, 예를 들어 다음 코드가 실제로 잘 작동한다는 것을 의미한다.

var product = "21" * "2";   // 두 문자열 곱은 숫자 42가 된다.

이 점을 활용하면 문자열에서 0을 빼는 방법으로 간단히 문자열을 숫자로 변환 할 수 있다.

var number = string_value - 0

(그러나 문자열 값에 0을 더하면 타입 변환이 수행되는 것이 아니라 문자열 이어붙이기가 수행된다는 것을

주의하라.)

위와 같은 편법을 사용하지 않고 문자열을 숫자로 명시적으로 변환하는 방법은 Number() 생성자를 함수처럼 호출하는 것이다.

var number = Number(string_value);

이 문자열/숫자 변환 방법의 문제는 문자열/숫자 변환에 지나치게 엄격한 규칙이 적용된다는 것이다.

이 변환 방법은 10진수만 제대로 변환할 수 있고, 문자열 내에서 앞부분이나 뒷부분에는 스페이스 문자들이 나타날 수 있지만 숫자 다음에는 스페이스 외의 문자들이 나타날 수 없다.

좀 더 융통성 있는 변환 방법이 필요하다면 parseInt()와 parseFloat()를 사용하라.

 

이 함수들은 문자열 내에 존재하는 어떤 형태의 숫자라도 변환하여 반환하고 숫자 다음에 나오는 숫자가

아닌 문자들은 모두 무시한다. parseInt()는 정수만 변환할 수 있지만 parseFloat()는 정수와 부동소수점

숫자를 모두 변환할 수 있다. 만약 문자열이 '0x'나 '0X'로 시작하면 parseInt()는 문자열을 16진수 숫자로

인식한다.^[각주:1] 예를 들어,

parseInt("3 blind mice");          // 3을 반환
parseFloat("3.14 meters");       // 3.14를 반환
parseInt("12.34");                    // 12를 반환
parseInt("0xFF");                    // 255를 반환

parseInt()는 변환하려는 숫자의 기수를 지정하는 두 번째 전달인자를 받기도 한다.

기수 값으로는 2에서 36 사이에 있는 값을 지정할 수 있다. 예를 들어,

parseInt("11", 2);                // 3(1*2 + 1)을 반환
parseInt("ff", 16);                // 255(15*16 + 15)를 반환
parseInt("zz", 36);              // 1295(35*36 + 35)를 반환
parseInt(077", 8);               // 63(7*8 + 7)을 반환
parseInt("077", 10);            // 77(7*10 + 7)을 반환

parseInt()와 parseFloat()는 지정된 문자열을 숫자로 변환하지 못할 경우 NaN을 반환한다.

parseInt("eleven");             // NaN을 반환
parseFloat("$72.47");          // NaN을 반환

1. ECMAScript 명세에는 문자열이 '0' ('0x'나 '0X'가 아니라)으로 시작하면 parseInt()는 문자열을 8진수나 10진수로 인식할 수 있다고 나와 있다. 명세에는 이 부분에 대한 정확한 작동 방식이 나와 있지 않으므로, 직접 기수를 지정하려는 경우가 아니라면 0으로 시작되는 숫자를 변환하는 데 parseInt()를 절대로 사용하지 말라. [본문으로]