[JS] javascript에서 문자열을 처리하는 다양한 방법

저번 포스팅에서 javascript에서  숫자 관련된 처리를 정리해뒀었다.

 

오늘은 문자열을 처리하는 여러가지 방법에 대해 정리하고자 한다.

 

문자열 표현 방법

 

먼저 javascript에서는 세가지로 문자열을 표현할 수 있다.

 

작은 따옴표(''), 큰 따옴표(""), 백틱(``)

 

각각 비슷하지만 조금씩은 다르고, 어떨때 쓴는 지에 따라서 효과가 다르다.

 

예를 들어 html 의 특정 태그가 들어가면 큰 따옴표보다는 작은 따옴표가 나을것이다. 왜냐면 내부에 속성 값들이 큰따옴표로 묶여있기 때문이다.

 

그리고 영어 문장 같은 경우는 작은 따옴표로 줄여서 표현하는 경우가 많으니, 큰 따옴표가 나을 것이다.

 

그리고 백틱은 키보드에 보면 물결(~) 과 같이 있는 녀석인데 이 안에서 $ 를이용해서 계산식이나 변수를 표현할 수도 있고, 여러줄의 문자열도 백틱 안에서는 가능하다.

 

이제 본격적으로 문자열을 처리하는 방법을 알아가보자.

 

length()

lenth로 문자열의 길이를 구할 수 있다.

let hello = 'HELLO';
console.log(hello.length);

특정 위치 접근

특정 위치 접근은 배열처럼 [] 안에 인덱스 번호를 넣어서 접근할 수있다. 다만 배열처럼 해당 위치에 수정은 불가하다.

let hello = 'HELLO';
// 접근은 가능하나 , 수정은 불가능
console.log(hello[3]);

 

toUpperCase(), toLowerCase()

toUpperCase와 toLowerCase를 이용해서 대문자나 소문자로 문자열을 변경할 수 있다.

let alphabet = 'abCdEFg';

console.log(alphabet.toUpperCase());
console.log(alphabet.toLowerCase());

 

indexOf()

indexOf를 통해 입력된 문자열의 시작 인덱스를 탐색할 수가 있다. 만약 해당하는 문자열이 없으면 -1을 리턴한다.

let alphabet = 'abcdefghihjklnm';
console.log(alphabet.indexOf('b'));
console.log(alphabet.indexOf('def'));
console.log(alphabet.indexOf('z'));

 

보통 문자열이 있는지 없는지 체크할때 아래와 같은 로직을 사용한다.

if(alphabet.indexOf('a') >-1) {
  console.log('ok');
}

-1보다 큰지에 대한 체크는 왜 하는건지 궁금해 하실수도 있다. 구체적으로 설명드리기 위해 아래 예시를 보자.

// 바보가 있으면 실패

function testFunc(str) {
  if(str.indexOf("바보")) {
     console.log("실패");
  } else {
    console.log("성공");
  }
}

testFunc("나는 천재인거 같아.");
testFunc("나는 딸 바보!");
testFunc("바보에게 바보가");

위의 로직에서 내가 기대한 값은 성공, 실패, 실패 이다.

 

그러나 ...

예상하지 못한 결과가 나온다.

 

여기서 이유를 찾아보면, 먼저 "나는 천재인거 같아 라는 문장은 -1을 리턴할 것이다.

그런데 if문에서 일반 정수값만 괄호에 들어가 있으면 true를 리턴하기때문에 "실패"가 출력된다.

 

그리고 세번째 "바보에게 바보가"는 바보가 index 0번에 나와 0을 리턴할 것이다.

여기서 if문에서 0이 괄호에 들어가 있으면 false를 리턴하기 때문에 else 문을 타버려서 "성공"이 출력되게 된다.

 

아래와 같이 로직을 고치면 깔끔하게 해결된다.

// 바보가 있으면 실패

function testFunc(str) {
  if(str.indexOf("바보") > -1) {
     console.log("실패");
  } else {
    console.log("성공");
  }
}

testFunc("나는 천재인거 같아.");
testFunc("나는 딸 바보!");
testFunc("바보에게 바보가");

실무에서 자주 처리되는 방법이므로, 무슨말인지 잘모르겠으면 천천히 다시한번 읽어보길 바란다.

includes를 사용하는 방법도 있다.

// 바보가 있으면 실패

function testFunc(str) {
  //if(str.indexOf("바보") > -1) {
  if(str.includes("바보")) {
     console.log("실패");
  } else {
    console.log("성공");
  }
}

testFunc("나는 천재인거 같아.");
testFunc("나는 딸 바보!");
testFunc("바보에게 바보가");

 

slice()

slice를 이용해 문자열을 잘라서 반환할수 있다.

let str = "abcde"

//idx 3부터 끝까지 반환
console.log(str.slice(3));

//idx 2부터 4전까지(3까지) 반환
console.log(str.slice(2,4));

// idx 1부터 뒤에서부터 3칸(0,1,2)
console.log(str.slice(1,-2));

 

보통 slice를 통해서 특정 패턴이 있는 문자열을 for문을 이용해 처리를 많이 하는데 간단하게 예를 들어보겠다.

let cleanCode = [
  "1장 깨끗한 코드",
  "2장 의미있는 이름",
  "3장 함수",
  "4장 주석",
  "5장 형식 맞추기",
  "6장 객체와 자료구조",
  "7장 오류처리",
  "8장 경계"
];

let newList = [];

for(let i = 0 ; i< cleanCode.length; i++) {
  newList.push(cleanCode[i].slice(3));
}

console.log(newList);

내가 가장 좋아하는 책 중 하나인 클린코드의 목차 중 일부이다. 여기서 앞에 'x장' 이부분 은 빼고 장의 제목만 가져오고 싶다. 그래서 공백까지 0,1,2 를 빼고 index 3번부터 잘라서 newList에 넣고 출력을 했다.

 

substring() 

substring은 slice와 비슷하게 동작한다. substring은 그냥 단순하게 입력된 값의 사이를 가져오겠다 라고 생각하면 된다.

두개의 순서는 바껴도 상관이 없다. 여기서 음수로 입력된값은 0으로 처리 된다.

let str = 'abcdefghi';

//idx 1부터 4 전(3) 사이
console.log(str.substring(1,4));
console.log(str.substring(4,1));
//음수는 0으로 인식
console.log(str.substring(-1,4));

 

substr()

substring과 비슷하게 생겼는데.. substr이라는 것도 있다.

(예전에 처음 javascript 할때 substr을 substring으로 생각해서 고생한 게 기억이 난다 ㅎㅎ)

substr(n,m) 은 n번째 index부터 m개 가져온다 라고 생각하면된다.

let str = 'abcdefghi';

console.log(str.substr(2,5));
console.log(str.substr(-3,3));

 

trim()

trim은 앞뒤 공백을 제거해서 가져온다. 보통 프론트 쪽에서는 백엔드에서 API를 호출해서 데이터를 받아와서 쓰는데.. 정말 간혹가다가 데이터 앞뒤에 공백을 넣어서 주는 감사한(?) 개발자들도 있다. 실무에서 이런 일이 일어나나 싶지만 실제로 일어나는 일들이다.

그래서 습관적으로 프론트개발자는 공백이 있든 없든 trim()을 넣어서 사용하곤 한다... ㅎㅎ

let str = '     hi, my name is kang.  ';
console.log(str.trim());

 

repeat()

말그대로 입력한 횟수만큼 반복한다.

let repeat = "repeat!!!";
console.log(repeat.repeat(5));

 

codePointAt(), fromCodePoint()

문자마다 아스키 코드라는게 존재하는데 이 값에 대한 처리를 위의 메서드를 통해 할 수 있다.

//아스키코드값얻기
console.log("A".codePointAt(0));
//아스키 코드값으로 문자열 얻기
console.log(String.fromCodePoint(65));

 

오늘은 javascript의 문자열을 처리하는 방법에 대해 정리해봤다. 아주 간단하고 기초적인 내용이지만 중요한 내용이니 잘 숙지하자.