자바스크립트에서 문자열을 결합하는 방법입니다.
크게 2가지 방법이 있습니다.
join 함수를 사용하는 방법과 연산자 + 를 사용하는 방법입니다.
+ 연산자 사용
문자와 문자를 연결하는 경우 + 연산자를 주로 사용합니다.
//문자와 문자를 연결하여 하나의 문자열로 완성
var str = 문자 + 문자
+ 연산자는 덧셈을 하는 경우에 자주 사용되지만 문자를 결합하고 싶은 경우에도 사용됩니다.
실제 사용
var result = '게스트님' + ' 안녕하세요.';
console.log( result );
출력 결과
게스트님 안녕하세요.
[게스트님]이라는 문자열과 [ 안녕하세요.] 라는 문자열을 + 연산자로 연결하여 하나의 문자열로 출력하고 있습니다.
자바스크립트에서는 [문자 + 문자] 이외에도 여러 가지 경우가 있습니다.
하나씩 살펴보겠습니다.
문자와 변수 결합
문자열이 저장되어 있는 변수와 문자를 결합하는 경우입니다.
var str = '하세요.'
var result = '게스트님' + ' 안녕' + str;
console.log( result );
출력 결과
게스트님 안녕하세요.
[하세요.] 라는 문자열을 저장한 변수 str을 다른 문자와 + 연산자로 결합하고 있습니다.
이처럼 고정 문자만이 아닌 변수에 저장되어 있는 문자와도 결합할 수 있습니다.
문자열과 숫자 결합
문자열에 숫자를 결합하는 경우입니다.
문자 타입에 숫자를 지정한 것이 아닌 숫자 타입의 값과 문자를 결합하는 경우입니다.
//문자열과 숫자를 결합
var result = '합계：' + 1 + 2;
console.log( result );
출력 결과
합계：12
결과는 [합계：3]가 아닌 [합계：12]로 표시되었습니다.
위의 경우에는 처음 결합 대상인 문자열[합계]와 숫자 [1]이 결합이 될 때 [1]은 문자 타입으로 변환이 됩니다.
그리고 문자열 [합계：1]과 숫자[2]가 결합될 때도 [2]는 문자로 변환되어 [합계：12]가 됩니다.
자바 스크립트에서 숫자를 계산하여 출력하고 싶은 경우에는 먼저 계산을 하고 문자와 결합을 해야 합니다.
숫자를 먼저 계산하고 결합을 해보도록 하겠습니다.
//예제 1
//()를 사용 먼저 계산
var result = '합계 ' + ( 1 + 2 );
console.log( '예제 1 결과：' + result );
//예제 2
//계산 결과를 변수에 대입후 결합
var num = 1 + 2;
var result = '합계 ' + num;
console.log( '예제 2 결과：' + result );
실행 결과
예제 1 결과：합계 3
예제 2 결과：합계 3
예제 1과 예제 2처럼 사용하여도 결과는 같지만 경우에 따라 다른 결과가 나올 수도 있기 때문에 용도에 맞게 사용하도록 해야 합니다.
공백 문자와 연결
자바 스크립트에서는 변수를 정의할 때 초기값을 설정하지 않으면 변수는 undefined 가 됩니다.
예제를 보도록 하겠습니다.
var str1;
var str2 = '';
console.log('안녕하세요' + str1);
console.log('안녕하세요' + str2);
실행 결과
안녕하세요undefined
안녕하세요
초기값을 설정하지 않은 str1은 undefined이 문자로 인식되어 결합이 되어버렸습니다.
변수와 문자를 결합하는 경우에는 변수를 미리 공백으로 초기값을 설정해둬야 합니다.
그리고 숫자와 변수를 결합하는 경우에도 주의를 해야 합니다.
var str1;
var str2 = '';
console.log( str1 + 10 );
console.log( str2 + 10 );
실행 결과
NaN
10
str2는 결과가 출력되지만 str1은 NaN이라는 결과가 나왔습니다.
undefined10이라고도 표시가 안되었습니다.
숫자나 문자를 변수와 결합할 때에는 초기값을 지정해주는 것을 잊어버리면 안 됩니다.
댓글