자바스크립트 완벽가이드 - 5.6 문자열 연산자

앞서 설명했던 바와 같이, 몇 가지 연산자는 문자열 피연산자를 받을 경우 특별한 효과가 나타난다.
+ 연산자는 두 문자열 피연산자를 이어 붙인다.

즉, 첫 번째 문자열 뒤에 두 번째 문자열이 따라 붙은 형태의 새로운 문자열을 생성한다.

 

다음 예의 결과는 "hello there" 문자열이다.

"hello" + " " + "there"

그리고 다음 코드는 문자열 "22"를 만들어 낸다.

a = "2"; b = "2";
c = a + b;

<, <=, >, >= 연산자들은 두 문자열을 비교하여 그 순서를 판단한다. 비교의 기준은 알파벳 순서다. 5.5.1항에서 언급한 바와 같이 이 알파벳 순서는 자바스크립트에서 사용되는 Unicode 문자 인코딩 기준이다. 이 인코딩에 따르면 라틴 알파벳의 모든 대문자는 모든 소문자보다 이전에 나타난다. (즉, 모든 소문자보다 작다) 이러한 특징은 때로는 예상치 못한 결과를 불러올 수도 있다고 설명한 바 있다.

== 연산자와 != 연산자도 문자열에 대해 적용할 수 있다. 하지만 여러분도 보았듯이, 이들 연산자는 모든 데이터 타입에 대해 작동하기 때문에, 문자열에 쓰인다고 해도 특별히 다를 게 없다.

+ 연산자는 좀 독특한 녀석이다. 이 연산자는 숫자 피연산자보다 문자열 피연산자에게 우선권을 부여한다.

앞서 언급한 바와 같이 + 연산자의 두 피연산자 중 하나가 문자열이면 (또는 객체이면) 다른 하나의 피연산자를 문자열로 변환하고 (또는 두 피연산자 모두 문자열로 변환하고) 결과로 얻어지는 두 문자열을 이어 붙인다 (숫자끼리의 덧셈이 아닌 것이다).

 

반면, 비교 연산자는 오직 두 피연산자가 모두 문자열인 경우에 한해서 문자열 비교를 수행한다.

하나의 피연산자만 문자열인 경우 자바스크립트는 이를 숫자로 변환하려 할 것이다.

아래 코드에서 이러한 경우를 선보이고 있다.

 

1 + 2         // 덧셈. 결과는 3.
"1" + "2"     // 이어 붙이기. 결과는 "12"
'1" + 2       // 이어 붙이기. 2가 "2"로 변환된다. 결과는 "12"
11 < 3       // 숫자 비교. 결과는 false.
"11" < "3"   // 문자열 비교. 결과는 true.
"11" < 3     // 숫자 비교. "11"이 11로 변환된다. 결과는 false
one" < 3   // 숫자 비교. one"이 NaN으로 변환된다. 결과는 false.

마지막으로 중요한 점 한 가지를 확인하고 넘어가자. + 연산자가 문자열과 숫자에 대해서 사용될 경우에는

결합 법칙이 성립하지 않을 수도 있다. 즉, 연산 수행 순서에 따라 결과가 다르게 나올 수도 있다.

다음 예에서 이와 같은 경우를 볼 수 있다.

 

s = 1 + 2 + "blind mice";     // 결과는 "3 blind mice"
t = "blind mice: " + 1 + 2;    // 결과는 "blind mice : 12"

이와 같이 결과에서 다소 놀라운 차이가 생기는 이유는, + 연산자가 왼쪽에서 오른쪽으로 적용되기 때문이다(괄호를 통해 적용 순서를 바꾸지 않는 한). 따라서 위의 마지막 두 줄은 다음과 같은 셈이 된다.

 

s = (1 + 2) + "blind mice"     // 첫 번재 +의 결과는 숫자. 두 번째 +의 결과는 문자열

t = ("blind mice: " + 1) + 2;   // 두 연산 결과는 모두 문자열