자바스크립트 문자열(String)

문자열(String)

자바스크립트에서 문자열(String)은 따옴표 안에 쓰여진 0개 이상의 문자를 말합니다.

즉 자바스크립트에서는 "", ''도 모두 문자열에 해당합니다.

 

 

문자열과 따옴표

그리고 다음과 같이 문자열을 표현할 때에는 큰따옴표나 작은 따옴표를 사용할 수 있습니다.

var fruitName1 = "Melon";
var fruitName2 = 'Melon';

 

문자열을 둘러싼 따옴표와 서로 일치하지 않는다면 다음과 같이 문자열 안에 다른 종류의 따옴표를 사용할 수 있습니다.

var str1 = "Hello World!";
var str2 = "Hello 'World'!";
var str3 = 'Hello "World"!';

 

단, 다음과 같이 입력하는 경우 문자열을 제대로 인식하지 못하게 됩니다.

var str = "Hello "World!"";

위와 같이 작성하는 경우 변수 str은 문자열을 Hello 까지만 인식하게 됩니다.

 

 

 

문자열의 길이 구하기

문자열의 길이는 length 속성을 사용해서 구할 수 있습니다.

var str = "Hello World!";
var len = str.length;

 

 

 

Escape Character

var str = "Hello "World!"";

다음과 같은 상황의 경우 이 문제를 해결하기 위해서는 world 부분을 감싸는 따옴표를 작은 따옴표로 바꾸는 방법도 있지만

만약 해당 부분을 꼭 큰 따옴표로 감싸서 표현하고 싶다면 escape character를 이용해서 이를 해결할 수 있습니다.

 

사용할 수 있는 종류는 다음과 같습니다.

코드	결과
\'	'
\"	"
\\	\

그래서 위의 문제는 다음과 같이 해결할 수 있습니다.

var str = "Hello \"World!\"";

 

 

 

문자열과 객체

자바스크립트에서는 new 키워드를 사용해서 문자열을 객체로 선언하는 것도 가능합니다.

var str1 = "Hello World!";
var str2 = new String("Hello World!");

여기서 주의할 점은 위에서 정의한 문자열 str1, str2에 대해서 '=='과 '==='에 대한 결과가 다르다는 것입니다.

'==' 의 경우 단순히 두 변수의 값만을 비교합니다. 그렇기 때문에 str1 == str2는 true가 됩니다.

하지만 '===' 의 경우 변수의 값뿐만 아니라 타입까지도 비교하기 때문에 

str1 === str2의 결과는 항상 false가 됩니다.(str1의 타입은 string, str2의 타입은 object)

 

 

 

문자열과 관련된 메소드

객체가 아닌 문자열은 객체가 아니기 때문에 속성이나 메소드를 가질 수 없습니다.

하지만 자바스크립트에서는 변수로 선언한 문자열에 대해서 메소드를 사용하면 이를 객체로 처리하기 때문에

객체가 아닌 문자열에도 속성이나 메소드를 활용할 수 있습니다.

 

메소드(method) or 속성	내용
length	문자열의 길이를 반환
indexOf()	인자로 받은 텍스트가 처음으로 감지되는 인덱스를 반환 (텍스트가 감지되지 않는 경우 -1을 반환) (두번째 매개변수를 사용하여 검색시작 위치 지정 - 처음부터)
lastIndexOf()	인자로 받은 텍스트가 마지막으로 감지되는 인덱스를 반환 (텍스트가 감지되지 않는 경우 -1을 반환) (두번째 매개변수를 사용하여 검색시작 위치 지정 - 끝에서부터)
search()	인자로 받은 텍스트를 문자열에서 탐색하고 일치하는 위치를 반환
slice(start, end)	start 인덱스부터 end 이전 인덱스까지의 문자열을 반환 (매개변수에 음수를 사용하면 문자열 끝에서부터 계산) (두번째 매개변수를 생략하면 해당 인덱스부터 나머지 문자열을 반환) (브라우져의 버전에 따라서 음수인덱스를 지원하지 않을 수도 있음)
substring(start, end)	기능은 slice와 동일하나 음수 인덱스를 지원하지 않음 (두번째 매개변수를 생략하면 해당 인덱스부터 나머지 문자열을 반환)
substr(start, length)	기능은 slice와 동일하나 두번째 매개변수가 추출할 문자열의 길이를 지정함 (두번째 매개변수를 생략하면 해당 인덱스부터 나머지 문자열을 반환) (첫번째 매개변수가 음수인 경우 위치를 문자열의 끝에서부터 계산)
replace(str1, str2)	해당 문자열에서 str1의 내용을 str2의 내용으로 변경함 (호출된 문자열을 변경하는 것이 아니라 새로운 문자열을 반환함) (기본적으로 첫번째 일치항목만을 대체함 - 모두를 원하면 / /g 추가) (탐색과정에서 대소문자를 구분함 - 구분없이 하려면 / /i 추가)
toUpperCase()	문자열의 모든 문자를 대문자로 변환
toLowerCase()	문자열의 모든 문자를 소문자로 변환
concat(str1, str2)	문자열 str1과 str2를 연결함 (' + ' 연산자를 이용해서 연결하는 것과 동일한 효과를 낼 수 있음) (3개 이상의 인자도 수용할 수 있음)
trim()	문자열의 양쪽 공백을 제거 (웹 브라우져의 버전에 따라서 지원하지 않을 수도 있음)
charAt(index)	문자열에서 인자로 전달한 인덱스 위치에 있는 문자를 반환
charCodeAt(index)	문자열에서 인자로 전달한 인덱스 위치에 있는 문자의 유니코드를 반환 (해당 메소드는 UTF-16 코드를 반환함)
split(character)	인자로 받은 character를 구분기호로 하여 문자열을 배열로 생성 (구분기호가 ""인 경우 단일문자 배열을 생성)

사실 내용을 읽어보면 indexOf()와 search() 메소드는 서로 동일한 기능을 지원하는 메소드인 것처럼 보입니다.

하지만 두 메소드는 다음의 미묘한 차이가 존재합니다.

1. search 메소드는 두번째 인자로 탐색시작 위치를 지정하는 것이 불가능합니다.
2. indexOf 메소드는 인자로 정규식을 전달할 수 없습니다.

현재 시점에서 우리는 정규식이 무엇인지 알지 못합니다. 하지만 해당 단계에서는 이정도로만 이해하고 추후에 다른 글을

통해서 정규표현식에 대해서 다루어보도록 하겠습니다.

 

 

또한 자바스크립트에서 문자열은 []를 이용한 접근을 허용합니다.

단  []는 오직 읽기, 조회만을 목적으로 사용할 수 있고 다음과 같이 값을 할당하는 목적으로는 사용할 수 없습니다.

var str = "HELLO WORLD";
str[0] = "A";
str[0]; 

즉, 위와 같이 코드를 작성한 경우 str[0] = "A" 부분은 오류를 일으키지는 않지만 제대로 동작하지 않습니다.

따라서 위의 코드에서 str[0]을 출력해보면 H가 출력되는 것을 확인할 수 있습니다.