#7 자바스크립트 - 문자열 제어

JavaScript 문자열

1. 문자열 연결

두 개의 다른 문자열을 연결할 때 혹은 피연산자가 문자열로 바뀔 수 있는 객체일 때

+ 연산자를 이용해 문자열로 연결한다.

"Hello " + "World!"        //-> "Hello World!"
"1" + "3"                //-> "13"

<연산자와 피연산자 모두 문자열일 때 />

10 + "is Ten!"            //-> "10 is Ten!"
1 + {}                    //-> "1[object Object]"
true + (new Date())       //-> "trueSat Mar 09 2019 12:22:31 GMT+0900 (한국 표준시)"

<피연산자 중 하나가 문자열 또는 문자열로 변환할 수 있는 객체일 때 />

위의 경우가 아닐 때는 다음과 같이 문자열로 변환하여 연결할 수 있다.

var a = 3;
console.log("a 값은 "+a+"입니다.");

혹은 템플릿 리터럴 (` ... `)을 이용할 수도 있다.

var a = 3;
console.log(`a 값은 ${a}입니다.`);

${...} 이것을 플레이스 홀더라고 부르는데, 플레이스 홀더를 이용하여

문자열 안에 변수나 표현식의 결과값을 넣을 수 있다.

2. 문자열을 조작하는 메소드

문자열을 처리하기 위한 객체로 String이 있다.

var msg = new String("Everything is Perfect!");

아래는 String 객체에 있는 메소드들이다.

메소드	설명	비고
codePointAt(n)	대상 문자열 n번째 문자의 코드 포인트의 스칼라 값을 10진수로 표현한 값	ES6
charAt(n)	대상 문자열의 n번째 문자
charCodeAt(n)	대상 문자열 n번째 문자의 UTF-16코드를 10진수로 표현한 값
concat([s1, s2, ...])	대상 문자열과 인수의 문자열을 연결해서 반환
endsWith(s [, n])	대상 문자열의 n번째 문자부터 문자열 s로 끝나는지를 판별한 논리값  n을 생략하면 문자열의 끝부터 검색함	ES6
includes(s [, n])	대상 문자열의 n번째 문자부터 문자열 s를 포함하는지를 판별한 논리값  n을 생략하면 문자열의 끝부터 검색함	ES6
indexOf(s)	대상 문자열에서 s가 처음 나오는 위치
lastIndexOf(s)	대상 문자열에서 s가 마지막에 나오는 위치
localeCompare(s)	대상 문자열이 문자의 정렬 순서에 따라 s의 앞뒤에 있는지 또는 같은 위치에  있는지 표시
match(r)	대상 문자열에 정규 표현식 r을 매칭한 결괏값
normalize(form)	form이 제시한 방식으로 유니코드 문자를 정규화
repeat(n)	대상 문자열을 n개 연결한 문자열	ES6
replace(s1, s2)	대상 문자열에 포함된 문자열 s1을 문자열 s2로 치환한 결괏값
search(r)	대상 문자열에서 정규식 r이 일치한 위치의 인덱스 값
slice(m, n)	대상 문자열의 m번째 이후 n번째 미만의 (m≤x<n) 부분 문자열을 반환  m과 n이 음수면 문자열 끝이 시작 위치가 됨
split(s [, n])	대상 문자열을 문자열 s로 분할한 문자열 배열을 반환  n은 발견된 문자열의 개수를 제한
startsWith(s [, n])	대상 문자열의 n번째 문자부터 문자열 s로 시작하는지를 판별한 논리값  n이 생략되어 있으면 문자열의 처음부터 검색	ES6
subString(m, n)	대상 문자열의 m번째 이후 n번째 미만의 (m≤x<n) 부분 문자열을 반환
toLocaleLowerCase()	대상 문자열을 로케일(언어)에 맞는 소문자로 변환
toLocaleUpperCase()	대상 문자열을 로케일(언어)에 맞는 대문자로 변환
toLowerCase()	대상 문자열을 소문자로 변환
toString()	String 객체를 문자열 값으로 변환
toUpperCase()	대상 문자열을 대문자로 변환
trim()	대상 문자열에서 앞뒤 공백을 제거
valueOf()	String 객체를 문자열 값으로 변환

아래는 대표적인 문자열 메소드를 사용한 예제이다.

var msg = new String("Everything is Perfect!");
 
msg.indexOf("t");            //-> 5 : 문자 "t"가 처음 나오는 위치
msg.indexOf("i", 10);        //-> 11 : 10번째 이후 문자부터 문자 "i"가 처음 나오는 위치
msg.lastIndexOf("t");        //-> 20 : 문자 "t"가 마지막으로 나오는 위치
msg.substring(7, 10);        //-> "ing" : 7번째 문자부터 10번째 문자 미만의 문자열
msg.slice(7, 10);            //-> "ing"
msg.slice(-8, -5);            //-> "Per" : 끝에서부터 9번째 문자부터 6번째 미만의 문자열
msg.slice(-3);                //-> "ct!" : 마지막 문자 3개
msg.split(" ");                //-> [ "Everything", "is", "Perfect!"] : " "로 문자열을 나눔
msg.replace("!", "?");        //-> "Everything is Perfect?" : "!"를 "?"로 바꿈
msg.toUpperCase();            //-> "EVERYTHING IS PERFECT!" : 모든 문자를 대문자로 바꿈
msg.endsWith(".");            //-> false : 문자열이 "."로 끝나는지를 뜻하는 논리값
msg.includes("thing");        //-> true : "thing"이 문자열에 포함되어 있는지를 뜻하는 논리값
msg.charCodeAt(0);            //-> 69 : 0번째 문자("E")의 문자 코드
msg.codePointAt(0);            //-> 69 : 0번째 문자("E")의 코드 포인트

3. 문자열을 배열로 읽고 쓰기

문자열을 읽을 때 배열처럼 대괄호([ ])를 사용할 수 있다.

var msg = new String("Everything is Perfect!");
msg[3]                     //-> "r"
msg[msg.length - 1]        //-> "!"

그러나 배열 요소를 추가하는 것처럼 값을 대입해서 수정할 수는 없다. 대입해도 무시된다.

var msg = new String("Everything is Perfect!");
msg[3] = "R";
console.log(msg);        //-> Everything is Perfect!

<본 포스팅의 코드들의 출처는 '길벗출판사 - 모던 자바스크립트 입문' 도서입니다. />