[Javascript] String 메소드 총 정리 (종류, 문법, 예시, 활용) - 2편

 

자바스크립트 String 메소드 총 정리

 

 

자바스크립트에서 가장 자주 쓰는 객체인 String의 prototype method에 대해 전부 살펴볼건데

분량이 많아 1, 2편에 나누어 포스팅해보려한다

사실 정의나 문법같은 부분들을 알고있어도 어떻게 활용해야할지 어렵게 느껴질 수 있다

그래서 간단한 코딩테스트 문제를 만들어서 각각 어떻게 활용하면 좋을지 학습할 수 있도록 정리했다

 

 

💌 1편은 아래 참조!

2022.05.09 - [프로그래밍언어/자바스크립트] - [JS] String 메소드 총 정리 (종류, 문법, 예시, 활용) - 1편

[JS] String 메소드 총 정리 (종류, 문법, 예시, 활용) - 1편

 

 

✔ 메소드는 사전순이 아닌 비슷한 기능들 끼리 묶어 정리했다

✔ 코드블록의 변수 str는 "hello"이다

✔ 활용에 해당하는 문제를 풀때 반복문을 사용해야한다면 for을 사용했다

 

 

 

⚾ padStart(), padEnd(), repeat()

 

문법

String string.padStart(Number length, String addStr)

문자열의 뒤에 두번째 인수로 주어진 특정 문자열을 붙혀 첫번째 인수로 주어진 길이인 문자열을 반환한다

 

String string.padEnd(Number length, String addStr)

문자열의 앞에 두번째 인수로 주어진 특정 문자열을 붙혀 첫번째 인수로 주어진 길이인 문자열을 반환한다

 

String string.repeat(Number howMany)

문자열이 인수로 주어진 횟수만큼 반복된 문자열을 반환한다

 

 

예시

/* padEnd() */
console.log(str.padEnd(8, ".")); //hello...

/* padStart() */
console.log(str.padStart(8, "!")); //!!!hello

/* repeat() */
console.log(str.repeat(2)); //hellohello

 

활용

🖍 1~9999의 무작위 숫자 num이 주어졌을 때, 숫자의 포맷을 '0000000x'~'0000xxxx'으로 맞추어 반환하는 함수 만들어보기 (활용 메소드 - padStart())

//예시
var num = Math.floor(Math.random() * 9998 + 1); //Math를 이용하여 1~9999 중 무작위 숫자를 추출함
solution(num) //'00008572'

function solution(num){
	return String(num).padStart(8, "0");
}

설명: 총 8자리로 맞춰주고 빈자리는 앞에서부터 0으로 채운다

 

🖍1~9999의 무작위 숫자 num이 주어졌을 때, 숫자의 포맷을 '0000000x'~'0000xxxx'으로 맞추어 반환하는 함수 만들어보기 (활용 메소드 - repeat())

//예시
var num = Math.floor(Math.random() * 9998 + 1); //Math를 이용하여 1~9999 중 무작위 숫자를 추출함
solution(num) //'00000628'

function solution(num){
    return "0".repeat(8-String(num).length) + String(num);
}

설명: 8에서 파라미터로 넘어온 숫자의 길이를 뺀만큼 0을 반복하여 숫자 앞에 붙혀준다

 

 

 

⚾ trim(), trimStart(), trimEnd()

 

문법

String string.trim()

문자열의 양 끝쪽에 있는 공백 문자를 제거한 새 문자열을 반환한다

 

String string.trimStart()

문자열 앞에 있는 공백 문자를 제거한 새 문자열을 반환한다

 

String string.trimEnd()

문자열 뒤에 있는 공백 문자를 제거한 새 문자열을 반환한다

 

 

예시

/* trim() */
var spaceStr = " my name is earth "; //앞과 뒤에 공백문자가 두개씩 들어있는 문자열
console.log(spaceStr.trim()); //'my name is earth'

/* trimEnd() */
console.log(spaceStr.trimEnd()); //' my name is earth'

/* trimStart() */
console.log(spaceStr.trimStart()); //'my name is earth '

 

활용

🖍 '사용자가 업로드한 파일명 fileName(확장자 포함) 의 앞과 뒤에 공백이 있다면 제거하여 반환하는 함수 만들어보기 (활용 메소드 - substring(), lastIndexOf(), trim())

//예시
var fileName = "  2022년_결산 .pdf;
solution(fileName) //'2022년_결산.pdf'

function solution(fileName){
    var fileNameOnly = fileName.substring(0, fileName.lastIndexOf(".")); //substring()와 lastIndexOf()를 사용하여 확장자를 제외한 파일명만 추출
    return fileNameOnly.trim() + fileName.substring(fileName.lastIndexOf(".")); //공백을 제거한 새로운 파일명에 기존 확장자를 붙혀주고 return
}

 

 

 

⚾ match(), matchAll(), search()

 

문법

Array string.match(Object regExp)

문자열에 인수로 주어진 정규 표현식과 매치되는 부분을 찾아 배열로 반환한다

 

Iterator string.matchAll(Object regExp)

그룹 캡처를 포함하여 인수로 주어진 정규 표현식에 대해 문자열과 일치하는 모든 결과의 반복자를 반환한다

 

Number string.search(Object regExp | String newStr )

인수로 주어진 정규 표현식과 매치되는 부분을 찾아 첫 문자의 인덱스를 반환한다. 찾는 문자가 없다면 -1을 반환한다. 인수는 정규 표현식이 아닌 문자열로 설정해도 무방하다

 

 

예시

/* match() */
var code = "G2#H3#J4#";
console.log(code.match(/\D\d#/g)); //['G2#', 'H3#', 'J4#'] 전체 문자열에서 숫자가 아닌 문자, 숫자, # 으로 이루어진 문자열을 찾아 배열로 반환

/* matchAll() */
console.log(new Array(...code.matchAll(/#/g))); //[['#'], ['#'], ['#']] 전체 문자열에서 #을 찾아 반복자로 반환
console.log(Array.from(code.matchAll(/#/g), match => match[0])); //[['#'], ['#'], ['#']] 위와 동일

/* search() */
console.log(str.search(/\D/)); //0
console.log(str.search(/\l/)); //2
console.log(str.search(/\z/)); //-1
console.log(str.search("el")); //1 파라미터에 문자열도 가능

 

활용

🖍 주어지는 정규 표현식에 해당하는 이메일 email 인지 검사하여 정규 표현식과 일치하다면 true, 아니라면 false를 반환하는 함수 만들기 (활용 메소드 - match())

//예시
//정규 표현식 : ^\w+[\w-]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$
var email = "earth999@sun.moon";
solution(email); //true
solution("__earth@moon") //false

function solution(email){
    if(email.match(/^\w+[\w-]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$/)) return true;
    else return false;
}

✨ MORE

정규 표현식을 해석해보자면 ^\w+ [\w-]* \@ \w+ ((-\w+)|(\w*)) \. [a-z]{2,3}$ 이렇게 나눠서 보자

^\w+ ~로 시작하는(^), 영문자/숫자/_에 해당하는 문자(\w), 1개 또는 여러개(+)

          => 영문자/숫자/_ 1자 이상으로 시작

[\w-]* 영문자/숫자/_에 해당하는 문자(\w) 또는([]) - 문자(-), 0개 또는 여러개(*)

          => 영문자/숫자/_/- 0자 이상

\@ @(\@)

      => @ 문자

\w+ 영문자/숫자/_에 해당하는 문자(\w), 1개 또는 여러개(+)

      => 영문자/숫자/_ 1자 이상

((-\w+)|(\w*)) ① - 그리고 영문자/숫자/_에 해당하는 문자(-\w), 1개 또는 여러개(+)

                    ② 영문자/숫자/_에 해당하는 문자(\w), 0개 또는 여러개

                    => ① 또는 ②의 문자가 가능

                    ()가 두번 쌓여있어서 그룹화 캡쳐 ① 또는 ② 가 두개씩 캡쳐된다 

\. .(\.)

    => . 문자

[a-z]{2,3}$ 영어 소문자 a-z에 해당하는 문자([a-z]), 2개 이상 3개 이하({2,3}), ~로 끝남($)

    => 영어 소문자 2개 이상 3개 이하로 끝남

 

그림으로 나타낸 정규표현식 https://regexper.com/ 이용

 

 

 

⚾ replace(), replaceAll()

 

문법

String string.replace(Obejct regExp | String searchStr, String replaceStr | Function strFunc)

문자열에서 정규 표현식에 일치하는 부분을 찾아 두번째 인수로 지정된 문자열로 교체하고 새로운 문자열로 반환한다. 정규 표현식에 g플래그가 있을 경우 모든 부분을 교체하고 없다면 첫번째로 발견된 부분만 교체한다.

 

String string.replaceAll(Obejct regExp | String searchStr, String replaceStr | Function strFunc)

문자열에서 정규 표현식에 일치하는 부분을 모두 찾아 두번째 인수로 지정된 문자열로 교체하고 새로운 문자열로 반환한다. 단, 정규 표현식을 사용할 경우 반드시 g플래그를 포함해야한다. (replaceAll()은 replace()의 정규표현식에 g플래그가 있는 경우와 동일하다)

 

 

예시

/* replace() */
console.log(str.replace("l", "L")); //heLlo
console.log(str.replace(/\D/, "*")); //*ello
console.log(str.replace(/\D/g, "*")); //*****

/* replaceAll() */
console.log(str.replaceAll("l", "L")); //heLLo
console.log(str.replaceAll(/\D/g, "*")); //*****
console.log(str.replaceAll(/\D/, "*")); //VM19959:1 Uncaught TypeError non-global RegExp argument

 

활용

🖍 질문과 질문에 대한 대답이 있는 문자열 question 에서 대답에 해당하는 대문자들을 문자 _ 로 전부 변경하여 새로운 문자열로 반환하는 함수 만들기  (활용 메소드 - replace())

//예시
var question = "1. what's your name? __TOM__ 2. what's your favorite color? __PURPLE__ 3. what's your favorite animal? __CAT__";
solution(question); //'1. what's your name? _____ 2. what's your favorite color? _____ 3. what's your favorite animal? _____'

function solution(question){
    return question.replace(/[A-Z]/g, "_");
}

설명: 영어 대문자를 찾을 경우 전부 _ 로 변경하기

 

 

 

⚾ toLocaleLowerCase(), toLocaleUpperCase()

⚾ toLowerCase(), toUpperCase()

 

문법

String string.toLocaleLowerCase([Array|String locale])

인수로 주어진 Locale에 따라 문자열을 소문자로 변환하여 반환한다

 

String string.toLocaleUpperCase([Array|String locale])

인수로 주어진 Locale에 따라 문자열을 대문자로 변환하여 반환한다

 

String string.toLowerCase()

문자열을 소문자로 변환하여 반환한다

 

String string.toUpperCase()

문자열을 대문자로 변환하여 반환한다

 

 

예시

/* toLocaleLowerCase() */
console.log("HELLO".toLocaleLowerCase()); //hello
console.log("TÜRKIYE".toLocaleLowerCase("tr")); //türkıye
console.log("TÜRKIYE".toLocaleLowerCase("ko-kr")); //türkiye

/* toLocaleUpperCase() */
console.log(str.toLocaleUpperCase()); //HELLO
console.log("türkiye".toLocaleUpperCase("tr")); //TÜRKİYE
console.log("türkiye".toLocaleUpperCase("ko-kr")); //TÜRKIYE

/* toLowerCase */
console.log("hElLo".toLowerCase()); //hello

/* toUpperCase */
console.log("hElLo".toUpperCase()); //HELLO

 

활용

🖍 id 입력시 전부 대문자로 바꿔서 표출해야할 때 필요한 함수 만들기   (활용 메소드 - toUpperCase())

//예시
var id = "earth999";
solution(id); //EARTH999

function solution(id){
    return id.toUpperCase();
}

 

 

 

⚾ toString(), valueOf()

 

문법

String string.toString()

객체의 문자열 표현을 반환한다

 

Primitive string.valueOf()

String 객체의 원시값을 반환한다

 

 

예시

/* toString() */
var strObj = new String("Hi");
console.log(strObj); //String {'Hi'}
console.log(strObj.toString()); //'Hi'

var num = 1121;
console.log(num.toString()); //'1121'


/* valueOf() */
var strObj = "string object";
console.log(strObj.valueOf()); //'string object'
console.log(typeof strObj); //object
console.log(typeof strObj.valueOf()); //string