이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌9 - JavaScript - 2년 전 등록 / 일 년 전 수정

문자열

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

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

문자열

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

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 객체에 대해 알아보겠습니다.

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

5개의 댓글이 있습니다.
7달 전
알찬 강의 정말 감사합니다 ! ㅎㅎ
일 년 전
안녕하세요 한가지 궁금한 부분이 있어 질문드립니다
해당 문자열의 속성들을 복합적으로 적용하고자 할 때

var a = ' aB,cd,ew '
var b = a.trim();
var c = b.toUpperCase();
var d = c.split(',');
d;

이런 식으로 순차적으로 코딩하는 방법외에 한줄로 처리할 수 있는 코딩법이 있는지요

테스트를 몇가지 해 봤을 땐 작동이 안되더군요

가령 var a = ' abCde ' 라는 문자에서 공백제거와 대문자변환을 한줄의 코드로 처리하는 코딩법이 있을까요
일 년 전
var a = ' abCde '.trim().toUpperCase() 이렇게 연달아 하시면 됩니다. 이 것을 메소드 체이닝이라고 합니다.
일 년 전
오~ 이런게 있군요 감사합니다 메소드끼리는 . 으로 추가시키는 거군요
일 년 전
제로초님
var string = 'hello!\nI\'m Zero';
이부분은 ''가 겹쳐서 SyntaxError나는데 ""로 감싸야 될 것 같습니다
일 년 전
제 눈에는 틀린 점이 없는데 SyntaxError가 나나요? 한 번 확인해보겠습니다.
일 년 전
아 제가 뭔가 오타를 쳤나봅니다. 하나씩 손에 익히려고 복붙안하고 옮겨 쓰다보니 실수했네요. 죄송합니다..ㅠ
일 년 전
제로초님 사이트로 독학 중입니다. 덕분에 쉽게 배울 수 있네요.
예제 중에 틀린부분이 있는 것 같아서 남깁니다.
var string2 = "cat,dog,pig";
string.split(','); // ['cat', 'dog', 'pig']
이부분은 string2.split(',');를 말하시는거 맞나요?
일 년 전
네 수정했습니다! 감사합니다!
일 년 전
알찬 강의 감사합니다. 그런데 궁금한점이... 제이쿼리에 api나 자바스크립트 글들을 보다보면 항상 여러가지 많은 프로퍼티? 들이 있던데 위에 쓰신 내용들도 자주쓰는것만 적은거라고 하셧는데 실제로 자바스크립트로 개발작업을 하다보면 trim , toUpperCase , toLowerCase 과 같은 프로퍼티 들을사용하나요..? 어디다 쓰지라는 생각이 드는데 안해봐서 못느끼는것일까요? ㅠ
일 년 전
네. 사용합니다 ㅎㅎ 그리고 막상 필요한 경우에 저 메소드들이 없으면 구현하기 막막해집니다.