Frontend/Javascript

String관련 유용한 연산들

petitCoding 2023. 2. 27. 12:23

1. split - 문자열을 원하는 토큰 기준으로 나누어 배열로 리턴한다.

 

예를 들어 다음 문장을 배열에 넣고 싶다면:

Apple,Tomato,Grape,Banana

split을 사용하여 다음과 같이 호출하면 된다.

 

const list = "Apple,Tomato,Grape,Banana";
const result = list.split(','); 
console.log(result); // [Apple, Tomato, Grape, Banana]

 

만약 이 배열을 다시 다른 토큰을 사용해 결합하고 싶다면 join을 사용해 문자열로 변환할 수 있다.

 

const list = "Apple,Tomato,Grape,Banana";
const result = list.split(','); 
console.log(result); // [Apple, Tomato, Grape, Banana]
console.log(result.join(' ')); // "Apple Tomato Grape Banana"

 

2. replace / replaceAll - 특정 문자를 내가 원하는 값으로 치환한다.

 

예를 들어 다음 문자열의 Tomato를 Potato로 바꾸고 싶다면

I don't like to eat Tomato.

다음과 같이 replace 를 사용해 문자열을 치환할 수 있다.

const word = "I don't like tomato.";
console.log(word.replace("tomato", "potato"); // I don't like potato.

 

그런데, replace는 한 번에 하나의 문자열만 치환이 가능하다.

그래서 replace를 사용해 여러 문자를 치환하고 싶을 때에는 다른 방법을 사용해야 한다.

과거에는 정규식(Regular expression) 이나 for문등을 이용해 replaceAll을 구현해 주었지만 ES2021이 나온 뒤로는 이 안에 내장된 replaceAll을 사용하여 문장 내에서 매칭되는 문자열을 전부 변경을 해 줄수 있다:

const word = "I don't like tomato, because tomato doesn't have taste";
console.log(word.replaceAll("tomato", "potato");
// I don't like poatato, because potato doesn't have taste

 

3. trim : 은근히 많이 사용함!

 

trim 함수를 사용하면 문자열의 앞, 뒤 공백을 전부 제거해준다. 스페이스 뿐 아니라 다른 공백들도 제거된다.

주로 사용자에게 입력값을 받아 해당 값을 사용할 때, 사용자가 실수로 넣은 공백들을 제거하기 위해 많이 사용한다.

trim뿐 아니라 trimStart, trimEnd함수도 문자열의 앞 또는 뒤의 공백을 제거하는데에 사용할 수 있다.

 

 

const word = " Hi! My name is Petit~~ ";
console.log(word.trim()) // "Hi! My name is Petit~~";
console.log(word.trimStart()) // "Hi! My name is Petit~~ ";
console.log(word.trimEnd()) // " Hi! My name is Petit~~";

 

 

반응형