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

 

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

 

 

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

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

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

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

 

 

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

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

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

 

 

 

⚾ charAt(), charCodeAt(), codePointAt()

 

문법

String string.charAt(Number index)

문자열의 index번째 문자를 유니코드 단일문자로 반환한다

 

String string.charCodeAt(Number index)

문자열의 index번째 문자를 UTF-16 코드를 나타내는 0부터 65535 사이의 정수로 반환한다

 

String string.codePointAt(Number index)

문자열의 index번째 문자에 대한 유니코드 코드 포인트 값인 0부터 1114111(0x10FFFF) 사이의 값을 반환한다

 

 

예시

/* charAt() */
var str = "hello";
console.log(str.charAt(1)); //e

/* charCodeAt() */
console.log(str.charCodeAt(0)); //104

/* codePointAt() */
var imoji = "👍";
console.log(imoji.codePointAt(0)); //128077

/* charCodeAt()과 codePointAt() */
//imoji2의 정보
//UTF-16: D83D DE0D
//Unicode Code Point : U+1F60D
var imoji2 = "😍";

console.log(imoji2.charCodeAt(0)); //55357
console.log(imoji2.charCodeAt(0).toString(16)); //55357을 16진수로 변환 => d83d
console.log(imoji2.charCodeAt(1)); //56845
console.log(imoji2.charCodeAt(1).toString(16)); //56845을 16진수로 변환 => de0d

console.log(imoji2.codePointAt(0)); //128525
console.log(imoji2.codePointAt(0).toString(16)); //128525을 16진수로 변환 => 1f60d

 

활용

🖍 같은 길이의 두 문자열을 담은 배열 arr가 주어졌을 때, 동일한 위치에 동일한 문자를 가지고 있는 모든 index 정보를 배열에 담아 반환하는 함수를 만들어보기 (활용 메소드 - charAt())

//예시
var arr = ["cat", "car"];
solution(arr) //[0, 1]

var arr2 = ["dog", "ear"];
solution(arr2) //[]

function solution(arr){
	var [a, b] = arr;
    var retVal = [];
    for(var i=0; i<a.length; i++){
        if(a.charAt(i) == b.charAt(i)) retVal.push(i);
    }
    return retVal;
}

설명: charAt() 메소드를 사용하여 문자를 비교할 수 있다

 

🖍 같은 길이의 두 문자열을 담은 배열 arr가 주어졌을 때, 동일한 위치에 동일하지않은 문자를 가지고 있을 경우 문자의 유니코드 값의 차를 배열에 담아 반환하는 함수를 만들어보기 (단, 모든 차는 양수로 표현할 것) (활용 메소드 - charAt(), charCodeAt())

//예시
var arr = ["cat", "car"];
solution(arr) //[2] |t의 유니코드 - r의 유니코드|

var arr2 = ["dog", "ear"];
solution(arr2) //[1, 4, 11]

function solution(arr){
    var [a, b] = arr;
    var retVal = [];
    for(var i=0; i<a.length; i++){
        if(a.charAt(i) != b.charAt(i)) retVal.push(Math.abs(a.charCodeAt(i) - b.charCodeAt(i)));
    }
    return retVal;
}

설명:  charCodeAt() 메소드를 사용하여 UTF-16 코드를 구해 값을 빼고

Math.abs()로 절댓값으로 바꿔준 후 배열에 넣어준다

 

 

 

⚾ normalize()

 

문법

String string.normalize([String form])

문자열을 유니코드 정규화 방식에 따라 정규화된 형태로 반환한다. 만약 주어진 값이 문자열이 아닐 경우에는 문자열로 변환 후 정규화한다

 

 

예시

/* normalize() */
/* normalize()의 파라미터 기본값은 NFC(정규형 정준 결합) 이다
   이외에 NFD, NFKC, NFKD가 있다 */
console.log('\u2728'.normalize()); //✨

 

 

 

⚾ startsWith(), endsWith(), includes()

 

문법

Boolean string.startsWith(String str)

문자열이 인수로 주어진 특정 문자열로 시작하는지를 검사한다

 

Boolean string.endsWith(String str)

문자열이 인수로 주어진 특정 문자열로 끝나는지를 검사한다

 

Boolean string.includes(String str)

문자열에 인수로 주어진 특정 문자열이 포함되어 있는지 검사한다

 

 

예시

/* startsWith() */
console.log(str.startsWith("h")); //true
console.log(str.startsWith("he")); //true
console.log(str.startsWith("c")); //false 

/* endsWith() */
console.log(str.endsWith("o")); //true
console.log(str.endsWith("lo")); //true
console.log(str.endsWith("z")); //false

/* includes() */
console.log(str.includes("ll")); //true
console.log(str.includes("aa")); //false

 

활용

🖍 '날짜정보_작성자이름' 형식으로 이루어진 파일명 n개를 담은 배열 arr가 주어졌을 때, 2021년 3월에 작성된 파일명을 모두 찾아 배열로 반환하는 함수 만들어보기 (활용 메소드 - startsWith(), split())

//예시
var arr = ["20200505_Tom.jpg", "20200720_Peter.png", "20200820_Ben.hwp", "20200823_Ben.hwp", "20201030_Tom.pdf", "20201212_John.md", "20210131_Wanda.png", "20210309_Tony.jpg", "20210411_Monaca.jpeg", "20210509_Peter.html", "20210701_Simon.pdf", "20210808_Wanda.jsp", "20211201_Emma.gif"];
solution(arr) //['20210309_Tony']

function solution(arr){
    var answer = [];
    for(var i=0; i<arr.length; i++){
        if(arr[i].startsWith("202103")) answer.push(arr[i].split(".")[0]);
      	//split은 인자로 주어진 문자열을 단위로 쪼개 배열로 반환하는 함수입니다
        //여기에서는 파일명의 .을 기준으로 파일명과 확장자를 쪼개 파일명만 넣어주기 위해 사용되었습니다
    }
    return answer;
}

설명: startsWith() 메소드를 이용하여 파일을 찾고 split() 메소드를 이용하여 파일명만 배열에 담아준다

 

🖍 '날짜정보_작성자이름' 형식으로 이루어진 파일명 n개를 담은 배열 arr가 주어졌을 때, jpg, png 확장자를 가진 파일명만 배열에 담아 반환하는 함수 만들기 (활용 메소드 - endWith(), split())

//예시
var arr = ["20200505_Tom.jpg", "20200720_Peter.png", "20200820_Ben.hwp", "20200823_Ben.hwp", "20201030_Tom.pdf", "20201212_John.md", "20210131_Wanda.png", "20210309_Tony.jpg", "20210411_Monaca.jpeg", "20210509_Peter.html", "20210701_Simon.pdf", "20210808_Wanda.jsp", "20211201_Emma.gif"];
solution(arr); //['20200505_Tom', '20200720_Peter', '20210131_Wanda', '20210309_Tony']

function solution(arr){
    var answer = [];
    for(var i=0; i<arr.length; i++){
        if(arr[i].endsWith("jpg") || arr[i].endsWith("png")) answer.push(arr[i].split(".")[0]);
        //split은 인자로 주어진 문자열을 단위로 쪼개 배열로 반환하는 함수입니다
        //여기에서는 파일명의 .을 기준으로 파일명과 확장자를 쪼개 파일명만 넣어주기 위해 사용되었습니다
    }
    return answer;
}

설명:  endsWith() 메소드를 사용하여 확장자를 체크하고 split() 메소드로 이용하여 파일명만 배열에 담아준다

 

 

 

⚾ concat(), substr(), substring(), slice(), split()

 

문법

String string.concat(String str)

문자열과 인수로 주어진 문자열을 합쳐서 하나의 문자열로 반환한다

 

String string.substr(Number index)

substring()과 동일한 기능을 하지만 웹 표준에서 제거될 예정이므로 사용하지 않는 것을 권장!

 

String string.substring(Number startIndex [, Number endIndex])

인수로 주어진 시작 인덱스부터 종료 인덱스 전까지 문자열을 잘라 반환한다. 단, 인수로 주어진 인덱스가 음수일 때는 0으로 취급하고 시작 인덱스가 종료 인덱스보다 크다면 두 인덱스를 바꿔 취급한다. 종료 인덱스가 없다면 문자열의 length를 종료 인덱스로 취급한다.

 

String string.slice(Number startIndex [, Number endIndex])

인수로 주어진 시작 인덱스부터 종료 인덱스 전까지 추출하여 새 문자열로 반환한다. 단, 인수로 주어진 인덱스가 음수일 때는 뒤에서부터 인덱스를 세어 위치를 찾고 시작 인덱스가 종료 인덱스보다 크다면 ""을 반환한다. 종료 인덱스가 없다면 문자열의 length를 종료 인덱스로 취급한다.

 

Array string.split(String str)

인수로 주어진 문자열을 기준으로 문자열을 분리하여 배열로 반환한다

 

 

예시

/* concat() */
console.log(str.concat("123")); //hello123

/* substr() */
console.log(str.substr(0, 3)); //hel

/* substring() */
console.log(str.substring(0, 3)); //hel ※시작 인덱스는 포함, 종료 인덱스는 미포함
console.log(str.substring(1, 0)); //h
console.log(str.substring(0, -2); //""
console.log(str.substring(-4, 2); //he

/* slice() */
console.log(str.slice(0, 3)); //hel ※시작 인덱스는 포함, 종료 인덱스는 미포함
console.log(str.slice(1, 0)); //""
console.log(str.slice(0, -2); //hel
console.log(str.slice(-4, 2); //e

/* split() */
var words = "cat car cap";
console.log(words.split(" ")); //['cat', 'car', 'cap']

 

활용

🖍 'yyyyMMdd' 형식의 입사날짜 hireDate와 이름의 이니셜 name을 숫자코드로 변환한 코드를 합쳐 사번을 반환하는 함수 만들기 (단, yyyyMM + name unicode + dd 순서로 합칠 것) (활용 메소드 - charCodeAt(), concat(), substring() 또는 slice())

//예시
var hireDate = "20220510";
var name = "LJS";
solution(hireDate, name); //'20220576748310' 년도 4자리 + 월 2자리 + 이니셜 숫자코드 순서대로 + 월 2자리

function solution(arr){
    var nameUnicode = "";
    for(var i=0; i<name.length; i++){
        nameUnicode += name.charCodeAt(i);
    }
    var empNo = (hireDate.substring(0, 6)).concat(nameUnicode).concat(hireDate.substring(6, 8));
    return empNo;
}

function solution(arr){
    var nameUnicode = "";
    for(var i=0; i<name.length; i++){
        nameUnicode += name.charCodeAt(i);
    }
    var empNo = (hireDate.slice(0, 6)).concat(nameUnicode).concat(hireDate.slice(6, 8));
    return empNo;
}

설명: charCodeAt() 메소드를 사용하여 이니셜을 숫자코드 형식으로 바꿔주고 hireDate를 substring() 또는 slice() 메소드로 쪼개고 concat() 메소드로 다시 붙힌다

 

 

 

⚾ indexOf(), lastIndexOf()

 

문법

Number string.indexOf(String str)

문자열의 앞에서부터 인수로 주어진 문자열과 일치하는 부분이 있는지 검사하고 일치한다면 일치가 시작되는 인덱스를 반환하고, 일치하는 곳이 없다면 -1을 반환한다

 

Number string.lastIndexOf()(String str)

문자열의 뒤에서부터 인수로 주어진 문자열과 일치하는 부분이 있는지 검사하고 일치한다면 일치가 시작되는 인덱스를 반환하고, 일치하는 곳이 없다면 -1을 반환한다

 

 

예시

/* indexOf() */
console.log(str.indexOf("e")); //1
console.log(str.indexOf("E")); //-1
console.log(str.indexOf("z")); //-1

/* lastIndexOf() */
var words = "cat car cap";
console.log(words.lastIndexOf("a")); //9
console.log(words.lastIndexOf(" ")); //7
console.log(words.lastIndexOf("z")); //-1

 

활용

🖍 이메일 정보가 담긴 email이 주어졌을 때, 이메일을 쓰고있는 사이트 이름과 아이디를 배열로 반환하는 함수 만들어보기  (활용 메소드 - slice(), indexOf(), lastIndexOf())

//예시
var email = "earth999@daum.net";
solution(email); //['daum', 'earth999']

function solution(email){
    var id = email.slice(0, email.indexOf("@"));
    var site = email.slice(email.indexOf("@")+1, email.lastIndexOf("."));
    return [site, id];
}

설명: slice()를 사용하여 @ 이전까지 잘라 id를 추출하고 @ 이후부터 . 이전까지 잘라 site를 추출한다

 

 

 

⚾ localeCompare()

 

문법

Number string.localeCompare(String compareString[, String locale[, Object options]])

두 문자열을 정렬했을 때 인수로 주어진 문자열이 앞에 있으면 양수, 주어진 문자열이 뒤에 있으면 음수, 동등한 정렬 상태이면 0을 반환한다

 

 

예시

/* localeCompare() */
console.log(str.localeCompare("hallo")); //1
console.log(str.localeCompare("hello")); //0
console.log("hallo".localeCompare(str)); //-1