기초부터 시작하는 코딩/Javascript

Javascript를 공부해 봅시다! 11. 문자열 메서드

kebab00 2023. 4. 22. 16:16

728x90

- 자 오늘은 수많은 메서드들 중에 문자열과 관련된 문자열들 중에서 10개만!! 골라서 해보겠습니다.

- 10개지만 2시간 반이 걸린... 개당 15분 실화냐?? 가슴이 웅장해진다.

- 한번 보시죠

01.  at()

"문자열".at([위치값])

- at()메서드는 위치값(인덱스 값)을 받아 해당되는 자리의 요소를 반환합니다. 

- 배열과 같이 0부터 첫번째 자리의 요소를 반환하며 -1은 마지막 자리의 요소부터 시작합니다.

{
    "javascript reference".at(0); //j
    "javascript reference".at(1); //a
    "javascript reference".at(-1); //e
    "javascript reference".at(-3); //n
}

02.  charAt()

"문자열".charAt([위치값])

- charAt()메서드는 위치값(인덱스 값)을 받아 해당되는 자리의 요소를 반환합니다. 

- 배열과 같이 0부터 첫번째 자리의 요소를 반환하며 -1부터는 빈 문자열을 반환합니다.

{
    "javascript reference".charAt(0); //j
    "javascript reference".charAt(1); //a
    "javascript reference".charAt(4); //v
    "javascript reference".charAt(-1); //빈문자열
    "javascript reference".charAt(10); //빈문자열
}

03.  charCodeAt()

"문자열".charCodeAt([위치값])

- charCodeAt()메서드는 위치값(인덱스 값)을 받아 해당되는 자리의 유니코드 값을 반환합니다. 

- 유니코드(Unicode)는 전 세계 언어의 문자를 정의하기 위한 국제 표준 코드입니다.

- 즉 언어를 숫자로 표현하는 방식이라고 할 수 있습니다. 이 메서드는 문자열에서 특정 문자를 찾거나, 문자열을 비교하거나, 문자열을 분할하는 등 다양한 상황에서 사용될 수 있습니다.

{
    "javascript reference".charCodeAt(0); //106
    "javascript reference".charCodeAt(1); //97
    "javascript reference".charCodeAt(4); //115
    "javascript reference".charCodeAt(-1); //NaN
    "javascript reference".charCodeAt(24); //NaN
    "javascript reference".charCodeAt(10); //32
}

04.  charPointAt()

"문자열".codePointAt([위치값])

- codePointAt()메서드는 위치값(인덱스 값)을 받아 해당되는 자리의 유니코드 값을 반환합니다. 

- 유니코드 코드 포인트가 16비트를 초과하는 경우에는 codePointAt()를 사용하여 정확한 코드 포인트 값을 가져올 수 있습니다.

{
    "javascript reference".codePointAt(0); //106
    "javascript reference".codePointAt(1); //97
    "javascript reference".codePointAt(4); //115
    "javascript reference".codePointAt(-1); //undefined
    "javascript reference".codePointAt(24); //undefined
    "javascript reference".codePointAt(10); //32
}

05.  concat()

"문자열".concat([문자열1],[문자열2])

- concat()메서드는 기존의 문자열과 입력한 문자열를 합친 값을 반환합니다. 

- 공백이 2개라도 인식을 합니다.

- 문자열이 여러개라도 다 합칠 수 있습니다.

{
    "javascript".concat("reference"); //javascriptreference
    "javascript".concat(" reference"); //javascript reference
    "javascript".concat("  reference"); //javascript  reference
    "javascript".concat("reference","jQuery"); //javascriptreferencejQuery
    "javascript".concat(" reference"," jQuery"); //javascript reference jQuery
}

06.  localeCompare()

"문자열".localeCompare([문자열])

- localeCompare()메서드는 문자열과 문자열을 비교하여 순서에 따라 값을 반환합니다. 

- 비교되는 값이 비교할 값보다 앞에 있다면 -1를 반환하고

- 비교되는 값이 비교할 값과 같다면 0을 반환하며

- 비교되는 값이 비교할 값보다 뒤에 있다면 1을 반환합니다.

{
    "a".localeCompare("b") //-1
    "a".localeCompare("c") //-1
    "a".localeCompare("a") //0
    "b".localeCompare("a") //1
    "c".localeCompare("a") //1
}

07.  normaliz()

"문자열".normalize(정규화 방식)
 "유니코드 문자열".normalize(정규화 방식)

- normalize()메서드는 문자열을 유니코드 정규화 방식(Unicode Normalization Form)에 따라 정규화된 형태로 반환합니다. 

- 정규화 방식은 'NFC', 'NFD', 'NFKC', 'NFKD'가 있습니다.

{
    "javascript".normalize("NFC")  //javascript
    "javascript".normalize("NFD")  //javascript
    "javascript".normalize("NFKC")  //javascript
    "javascript".normalize("NFKD")  //javascript
    "\u006a\u0061\u0076\u0061\u0073\u0063\u0072\u0069\u0070\u0074".normalize("NFC")  //javascript
    "\u006a\u0061\u0076\u0061\u0073\u0063\u0072\u0069\u0070\u0074".normalize("NFD")  //javascript
    "\u006a\u0061\u0076\u0061\u0073\u0063\u0072\u0069\u0070\u0074".normalize("NFKC")  //javascript
    "\u006a\u0061\u0076\u0061\u0073\u0063\u0072\u0069\u0070\u0074".normalize("NFKD")  //javascript
}

08.  padEnd()

"문자열".padEnd([문자열의 갯수],[채워넣을 문자열])

- padEnd()메서드는 현재 문자열에 다른 문자열을 문자열의 끝(우측)부터 채워넣어 주어진 길이를 만족하는 새로운 문자열을 반환합니다.

- 목표 문자열의 갯수가 현재 문자열의 길이보다 적다면 채워넣지 않고 그대로 반환합니다.

- 채워넣을 문자열이 너무 길어 목표 문자열의 길이를 초과한다면 좌측 일부를 잘라서 넣습니다.

- 기본값은 " "(빈문자열)입니다.

{
    "javascript".padEnd(3)  //javascript
    "javascript".padEnd(3,"reference")  //javascript
    "javascript".padEnd(12,"reference")  //javascriptre
    "javascript".padEnd(17,"reference")  //javascriptreferen
    "javascript".padEnd(19,"reference")  //javascriptreference
    "javascript".padEnd(24,"reference")  //javascriptreferencerefer
}

09.  padStart()

"문자열".padStart([문자열의 갯수],[채워넣을 문자열])

- padStart()메서드는 현재 문자열에 다른 문자열을 문자열의 시작(좌측)부터 채워넣어 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 

- 목표 문자열의 갯수가 현재 문자열의 길이보다 적다면 채워넣지 않고 그대로 반환합니다.

- 채워넣을 문자열이 너무 길어 목표 문자열의 길이를 초과한다면 좌측 일부를 잘라서 넣습니다.

- 기본값은 " "(빈문자열)입니다.

{
    "reference".padStart(15)  //      reference (앞에 빈 문자열이 생김)
    "reference".padStart(3,"javascript")  //reference
    "reference".padStart(12,"javascript")  //javreference
    "reference".padStart(17,"javascript")  //javascrireference
    "reference".padStart(19,"javascript")  //javascriptreference
    "reference".padStart(24,"javascript")  //javascriptjavasreference
}

10.  repeat()

"문자열".repeat([반복할 횟수])

- repeat() 메서드는 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환합니다. 

- 음수 값을 입력한다면 RangeError가 뜹니다.

{
    "javascript".repeat(-1)  //RangeError 에러가 뜹니다
    "javascript".repeat(1)  //javascript
    "javascript".repeat(0)  //" "
    "javascript".repeat(3)  //javascriptjavascriptjavascript
    "javascript".repeat(3.5)  //javascriptjavascriptjavascript
}

- 끝!!