#6. String ( 문자열 )
자바스크립트의 String ( 문자열 ), "Hello World"
자바스크립트도 다른 개발 언어와 마찬가지로 String 데이터 타입을 가질 수 있습니다. 여기서 얘기하는 String 은 "" (큰 따옴표) 또는 '' (작은 따옴표) 로 감싸진 숫자, 글자, 공백, 구두점 등을 의미하며, 아래 예시 코드처럼 사용해야 합니다.
var greetingH = "Hello";
var greetingW = 'World';
여기서 주의할 점은 " 로 시작한 문자는 반드시 " 으로 끝나야 합니다. 즉 아래 코드처럼 "와 ' 을 섞어서 작성할 경우 문법적 오류가 나타납니다.
var greetingH = "Hello'; // SyntaxError 발생
그럼 영어 문법에서 자주 사용되는 I'm Inkwon 처럼 문자열 안에 작은 따옴표를 사용할려면 어떻게 해야 할까요? 2가지 방법이 있는데 하나는 "" 로 문장을 감싸고 시작하는 것입니다.
var intro = "I'm Inkwon";
다른 방법으로 \ (역슬래시)를 사용하는 것입니다. \ 를 사용하면 '' 안에 ' 을 사용할 수 있습니다.
var intro = 'I\'m Inkwon';
\ 을 사용하여 뒤에 문자나 숫자가 오는 조합을 "이스케이프 시퀀스"라고 합니다. 줄 바꿈, 탭 사용, 작은 따옴표 등 별도의 기능을 사용하고자 할 때는 이스케이스 시퀀스를 사용해야 합니다. 아래는 \n, \t, \\ 이스케이스 시퀀스의 출력 결과입니다.
var intro1 = 'I am \nInkwon'; // 줄바꿈
var intro2 = 'I am \tInkwon'; // 탭 사용
var intro3 = 'I am \\Inkwon'; // 역슬래시 사용
출처 : MSDN 자바스크립트의 이스케이프 시퀀스
문자 더하기, String + String = Stirng String
Number 데이터 타입 편에서 잠깐 언급했듯이 String 에서도 + 연산자를 사용할 수 있습니다. 다만 Number 를 사용했을 때와 결과는 다르게 나타납니다. + 연산자를 사용해서 2개의 String 을 연결하면 첫 번째 문자 뒤에 두 번째 문자가 붙은 새로운 String 이 만들어 집니다.
var greetingH = "Hello";
var greeting = greetingH + " World"; // Hello World 출력
위와 같이 String 에서 + 연산자의 특징은 숫자를 사용했을 때도 동일한 결과가 출력됩니다.
var num = "10" + "10"; // 1010 출력
String ( 문자열 ) 의 length ( 길이 ) 는 어떻게 알 수 있을까?
String 길이는 단어 그대로 length 라는 property 사용하면 알아낼 수 있습니다. length 는 String 바로 뒤에 사용하거나 String 이 담겨있는 변수 뒤에 붙여서 사용할 수 있습니다.
var intro = 'Hello World';
intro.length;
or
"Hello World".length;
위 코드의 length 는 띄어쓰기를 포함해서 11이 출력됩니다.
변수 안의 데이터 타입을 문자열로 바꿀 수 있다?!!
변수 안의 데이터를 문자열로 바꾸는 2가지 방법이 있습니다. 하나는 toString() method (메서드) 를 사용하는 방법입니다. 아래 코드에 숫자 30을 변수에 넣고 typeof 를 적용하면, 데이터 타입으로 number 가 출력되는 것을 확인할 수 있습니다.
var num = 30;
typeof num; // number
이전에 length property 를 사용했던 것처럼 변수 num 뒤에 toString method 를 붙이면 데이터 타입이 string 으로 바뀌는 것을 확인할 수 있습니다.
var numStr = num.toString();
typeof numStr; // string
다른 방법으로는 String() 함수를 사용할 수 있습니다.
var numStr = String(10);
typeof numStr;
아래 그림처럼 String() 은 number, boolean, null, undefined 데이터 타입을 String 으로 변환시킬 수 있으며, toString() 은 number, boolean 만 변환시킬 수 있다.
"" 와 '' 중 어느 것을 사용하는 것이 더 좋을까?
자바스크립트에서 String 을 처리할 때 ""와 '' 중 어느 것을 사용할지 고민되는 경우가 있습니다. 사실 어느 것을 사용해도 상관없지만 개인적으로 HTML 작성 시 편리성과 가독성을 고려했을 때 '' 로 작성하는 것이 더 효율적이라고 생각됩니다.
HTML을 작성할 때는 "" 표가 기본으로 사용되기 때문에 \ 를 이용하여 이스케이프 시퀀스를 사용할 경우 가독성이 크게 떨어지게 됩니다. 아래 코드는 HTML <a> 태그를 자바스크립트로 작성한 예입니다.
var anchor1 = "<a href=\"http://ww.daum.net\">daum</a>";
var anchor2 = '<a href="http://www.daum.net">daum</a>';
\ 이스케이프 시퀀스를 사용한 변수 anchor1 보다 '' 를 사용해서 문장을 감싼 변수 anchor2 가 조금 더 가독성 측면에서 인지하기 편하다는 것을 확인할 수 있습니다.
이번 장에서는 String 데이터 타입이 가지고 있는 특징을 대해서 살펴보았습니다. Number 와 마찬가지로 직관적으로 이해할 수 있는 부분이 많아 예제 코드를 작성하면서 학습하였다면 누구나 무리없이 따라 올 수 있습니다. 다음 장에는 Number 와 String 보다 살짝 난이도가 높은 Array ( 배열 ) 이 갖고 있는 스킬과 능력을 알아 보겠습니다.
설명 중간에 property ( 프로퍼티 )와 method ( 메서드 )라는 용어가 나오는데, 이 용어에 대한 설명은 Object 와 관련되어 있는 부분이라 그때 다시 설명드리겠습니다. 일단 지금 단계에서는 "데이터 타입별로 어떤 기능이 담겨져 있는 것" 으로 이해해 주시면 됩니다. ^-^
