ZeroCho Blog

이제 왕초보를 벗어났으니 자바스크립트가 기본적으로 지원하는 것들에 대해 알아보겠습니다. 이번 시간은 문자열입니다.

문자열

첫 시간에 간단히 알아봤었죠. 문자열은 작은 따옴표 또는 큰 따옴표로 감싸면 된다고요. 또 작은 따옴표가 문자열에 포함되어있을 경우는 큰 따옴표로 감싸거나, \를 앞에 붙여 이게 문자열 안의 따옴표인지 알려줘야 한다는 것을요.

var str = 'how\'re you?';
var str2 = "how're you?";

저는 작은 따옴표를 선호합니다. 왜냐하면 shift를 누를 필요가 없거든요. 하지만 이건 제 개인적인 의견이고 여러분은 둘 중 하나를 선택하시면 됩니다. 그리고 만들고 있는 앱 전체에서 일관성있게 한 가지 종류만 사용하셔야 합니다. 그래야 보기가 좋습니다.

자바스크립트는 문자열에 많은 메소드들을 지원하고 있습니다. 메소드는 객체 안에 있는 함수를 부를 때 메소드라고 한다고 말씀드렸는데요. 사실 문자열도 객체입니다(정확히는 원시 래퍼). 실제로 콘솔에 new String()이라고 치면 어떤 객체가 나옵니다. 그래서 메소드가 있는거에요.

객체에는 속성도 있다고 했죠? 속성 하나로 시작해보겠습니다. 아, 물론 다는 아니고 자주 쓰이는 것만 알려드릴 거에요.

개행

잠깐! 속성을 알려드리기에 앞서 문자열에서 줄바꿈하는 방법부터 알아보죠. 문자열은 아무리 길어도 특수한 문자를 넣지 않으면 한 줄로 인식됩니다. 줄을 바꾸려면 \n이라는 문자를 넣어주면 됩니다.

var string = 'hello!\nI\'m Zero';
/*
hello!
I'm Zero
*/

위와 같이 줄이 바뀌어 표시됩니다. html에서는 문자열이 길면 알아서 다음 줄로 넘어가게 해 주지만, 콘솔은 그렇지 않습니다. 콘솔에서 줄을 바꾸고 싶을 때 주로 \n을 사용합니다.

문자열.length

var string = "hello";
string.length; // 5

문자열의 길이를 알려주는 속성입니다.

문자열.charAt(자릿수)

var string = "hello";
string.charAt(1); // e
string[1]; // e

문자열의 특정 자릿수의 문자를 알려줍니다. 자릿수는 0부터 시작합니다! 굳이 charAt함수를 쓰지 않고 문자열을 배열처럼 생각해서 [1]을 해도 같은 결과를 얻을 수 있습니다.

문자열.split(구분자)

var string = "hello";
string.split(''); // ['h', 'e', 'l', 'l', 'o']
var string2 = "cat,dog,pig";
string2.split(','); // ['cat', 'dog', 'pig']

전 시간에 썼던 split 함수입니다. 구분자를 기준으로 문자열을 나누어 새 배열로 만들어줍니다.

문자열.concat(문자열)

var string = "hello ";
var string2 = "world";
var string3 = string.concat(string2); // "hello world"

두 문자열을 합쳐 새로문 문자열을 반환하는 함수입니다. 간단하게 string + string2 해도 됩니다.

문자열.trim()

var string = "   Hello    ";
string.trim(); // "Hello"

문자열의 좌우 공백을 제거한 새 문자열을 반환합니다.

문자열.toUpperCase(), 문자열.toLowerCase()

var string = "aBcD";
string.toUpperCase(); // "ABCD"
string.toLowerCase(); // "abcd"

각각 문자열을 대문자나 소문자로 바꾼 새 문자열을 반환합니다.

문자열.substr(시작점, 길이)

var string = "abcde";
string.substr(1,3); // "bcd"

문자열을 시작점부터 길이만큼 자른 새 문자열을 반환합니다. 시작점은 역시 0부터 시작합니다.

문자열.substring(시작점, 끝점)

var string = "abcde";
string.substring(1,3); // "bc" 

substr과 자주 헷갈리는 함수입니다. 저도 도저히 안 외워집니다. 두 번째 매개변수가 길이가 아닌 끝점입니다. 자를 때 시작점은 포함되지만 끝점은 포함되지 않습니다.

문자열.slice(시작점, 끝점)

var string = "abcde";   
string.slice(1,3); // "bc"
string.slice(-4,3); // "bc"

substring과 90% 동일합니다. 다만 한 가지 추가된 기능이 마이너스 값을 넣는 겁니다. 마이너스 값은 끝에서부터 셉니다. 즉 위의 예와 같이 -4면 끝에서부터 4번째 자리부터 시작하는 겁니다. substring보다 활용도가 더 많다고 할 수 있습니다.

문자열.replace(찾을값, 교체값)

var string = "hello world";
string.replace('hello', 'goodbye'); // "goodbye world"

문자열에서 찾아 교체 값으로 바꾼 새로운 문자열을 반환합니다. 굿바이 월드하니까 뭔가 슬프네요...

문자열.indexOf(찾을값), 문자열.lastIndexOf(찾을값)

var string = "hello world";
string.indexOf('o'); // 4
string.lastIndexOf('o'); // 7

문자열에서 찾을 값의 위치를 알려줍니다. 해당하는 값이 여러 개 있어도 처음 찾은 것의 위치만 알려줍니다. lastIndexOf는 끝에서부터 찾습니다.

전부는 아니고 많이 쓰이는 메소드만 알려드렸습니다. 이것도 많다고요? 외우려고 노력하지 마시고 필요할 때마다 찾아서 쓰세요. 그렇게 하다보면 저절로 외워집니다. 다음 시간은 숫자와 Math 객체에 대해 알아보겠습니다.