중급 기본 정리 (with 앙마코딩) 문자열 매소드

이 글은 인프런에서 앙마코딩님의 무료 강좌를 학습한 내용입니다. (자바스크립트 중급 강좌)

문제 시 바로 삭제하겠습니다.

출처 [무료] 자바스크립트 중급 강좌 대시보드 - 인프런 | 강의 (inflearn.com)

문자열 매소드

 

문자열로 표현하는 방법은 작은 따옴표(') 큰 따옴표 (") 백틱 (`)가 있다.
백틱을 제외하고 따옴표로 여러 문자열을 묶을 때는 원치 않는 결과가 나올 수 있으므로 조심해야한다.
약간의 tip을 주자면
html은 클래스 명과 같이 큰 따옴표가 자주 들어감으로 전체를 작은 따옴표를 묶어주는 것이 좋다.
영어 문장에 경우 어퍼스트로피(')가 작은 따옴표와 동일하게 사용되서 큰 따옴표로 묶어주는 것이 좋다.

 

백틱은 시작과 끝에 작성하여 묶는다 사이에 변수나 식처럼 문자열이 아닐 경우 ${}로 표시해준다.

let name = 'Btae';
let result = "My name is " + name + ". " /*My name is Btae.*/
/* let result = `My name is ${name}.` //과 동일하다.*/

 

또 다른 백틱의 장점이 있는데, 그것은 줄바꿈이 가능하다는 것이다.

let text = `오늘도 열심히 
공부를 해야겠다.`;
/* let text = "오늘도 열심히 \n공부를 해야겠다"; //와 동일하다.//

 

따옴표로 묶을 경우 \n표시로 줄바꿈을 해야한다. 줄바꿈 없이 변경하게 되면 error가 나타난다.

문자열 매서드는 배열 매서드와 유사한 점이 많은 것 같다.

lenghth : 문자열 길이

let text = '안녕하세요.';
text.length // 6

배열에서는 갯수를 표시했지만, 문자열에서는 글자에 갯수를 반환한다.

 

배열과 비슷하게 대괄호를 통해서도 해당 글자에 접근 할 수 있다.(이때 글자 하나하나를 인덱스 번호를 부여했다고 생각하면 된다.
다만 배열과 다른점은 글자를 접근 할 수는 있지만 변경 할 수는 없다.

let text = '안녕하세요.';
text[1] // '녕'
text[2] = '호' // 하를 호로 변경
console.log(text); // '안녕하세요'

 

toUpperCase() , toLowerCase() : 영문 대소문자 변경

let text = "Hello. My name is Btae."
text.toUpperCase(); // "HELLO. MY NAME IS BTAE."
text.toLowerCase(); // "hello. my name is btae."

예시와 같이 toUpperCase()는 모든 영문자를 대문자로. toLowerCase()는 모든 영문자를 소문자로 변환한다.

 

indexOf(text) : 문자 위치 찾기

let text = "Hello. My name is Btae."
text.indexOf('My'); // 8
text.indexOf('you'); // -1

 

예시와 같이 indexOf()매서드는 입력한 텍스트에 위치를 반환한다. 당연히 시작은 0부터 시작하게 되고 입력한 텍스트 첫 글자를 위치로 반환한다. 배열과 동일하게 해당 값이 없다면 -1을 반환한다.

 

indexOf는 if문과 만날 때 주의해야 한다.
if문에 조건이 식이 아닐 경우 0이 나타나면 false를 반환한다.

let text = "Hello. My name is Btae."
if(text.indexOf('Hello')){
  console.log('hi')
} // 실행되지 않음
if(text.indexOf('you')){
  console.log('hi')
} // 'hi'

위 소스를 보면 의도와는 다르게 있는 문자를 반환할 때는 실행되지 않고, 없는 문자를 반환할 때에는 실행이 된다.
이는 if(0)는(hello는 첫 글자라 0이 반환됨) false를 반환하고 if(-1)는 true를 반환하기 때문이다.
따라서 if(text.indexOf('hi') > -1)으로 조건을 변경해야한다.

 

slice(n, m), substring(n, m), substr(n, m) : 문자열 특정 구간 가져오기

 

위 매소드는 비슷한 기능을 하고 생김새도 비슷하지만 실행방법이 다르다.

slice(n, m)은 n번째부터 m번째 글자 앞까지 반환한다. (당연히 인덱스 번호이다. 0번 부터)
특이한 점으로는 m 값이 없다면 끝까지 반환하고, 음수라면 뒤에서부터 글자 수를 계산한다.

 

substring(n, m)은 n번째 글자와 m 번째 글자에 사이를 문자열로 반환한다.
따라서 n과 m이 바뀌어도 값은 동일하다. 단, n과 m 중 큰 숫자 번째 글자 앞까지를 반환한다. 그리고 음수는 0으로 계산한다.

 

substr(n, m)은 n번째 글자부터 시작해 m개를 반환한다.음수는 뒤에서부터 숫자를 계산한다.

 

trim() : 앞 뒤 공백 제거

let a = "        abc   ';
a.trim(); // 'abc'
/* 앞 뒤 공백을 제거한다*/

이는 보통 사용자에게 무언가를 입력 받을 때 사용한다.

 

repeat(n) : n 번 반복

let a = 'abc';
a.repeat(3); // 'abcabcabc'
/* a 문자열을 3번 반복*/

 

문자열의 크기 비교

숫자 크기를 비교하는건 매우 쉬운 일이고 당연한 일이다. 프로그램에서는 문자도 비교가 가능하다.
문자의 아스키 값으로 비교하는데 이 숫자를 다 외울 필요는 없다. 정 필요하다면 검색으로 찾을 수 있고
보통 알파벳 순서대로 커지고, 대문자보다 소문자가 더 크다는 정도만 알고 있어도 된다.

 

문자의 크기를 찾거나 하는 매서드가 있다.

"a".codePointAt(0); // 97
/* 문자 a의 크기를 십진법으로 나타낸 값 97*/
String.fromCodePoint(97) // "a"
/* 십진법 97 번은 문자 a*/ 

 

이렇게 문자나 그 값을 알고 있으면 서로 찾을 수 있다.