본문 바로가기
JavaScript

20210713 JavaSciprt DeepDive 11 : Number, Math, Date, RegExp, String (생성자 함수, 프로퍼티, 메서드 등...)

라쿤코드 2021. 7. 13. 22:00

JavaScript Deep Dive 11



📄 용어 및 중요사항 정리


Number


Number 생성자 함수


  • new Number(인수) : [[NumberData]] 내부 슬롯에 숫자인 인수를 할당한 Number 래퍼 객체 생성
    • 숫자 인수 없이 호출시, 기본으로 내부 슬롯에는 0을 할당
    • [[PrimitiveValue]]와 [[NumberData]]는 같음
    • 인수가 숫자가 아닌 값 전달시, 숫자로 강제 변환후 내부슬롯에 할당
      • 문자열 숫자 -> 숫자로 변환되어 할당
      • 문자열 문자 -> NaN으로 변환되어 할당
  • Number(인수) : 인스턴스가 아닌, 숫자를 반환(명시적 타입변환)
    • 문자열 숫자 -> 숫자
    • 불리언 -> 숫자

Number 프로퍼티


  • Number.EPSILON : 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차이와 같음 (2.2204460...... * 10^-16)

    • 부동소수점 산술 연산에서의 미세한 오차 발생을 해결하기 위해 사용함
      • 부동소수점의 연산값과 기대값이 다름
      • 0.1 + 0.2 === 0.3은 false임
      • 부동소수점의 연산값과 기대값의 차이가 EPSILON보다 작으면 같은 수로 인정함
        • EPSILON을 통한 비교함수를 만들수 있음

  • Number.MAX_VALUE : JS에서 표현할수 있는 가장 큰 양수 값
    • MAX_VALUE < Infinity
  • Number.MIN_VALUE : JS에서 표현할수 있는 가장 작은 양수 값
    • 5*10^-324
    • MIN_VALUE > 0

  • Number.MAX_SAFE_INTEGER : JS에서 안전하게 표현할수 있는 가장 큰 정수값 (9007199254740991)
  • Number.MIN_SAFE_INTEGER : JS에서 안전하게 표현할수 있는 가장 작은 정수값 (-9007199254740991)

  • Number.POSITIVE_INFINITY : 양의 무한대를 나타내는 숫자값 Infinity 값과 같음
  • Number.NEGATIVE_INFINITY : 음의 무한대를 나타내는 숫자값 -Infinity 값과 같음
  • Number.NaN : 숫자가 아님을 나타내는 숫자값으로 window.NaN과 같음



Number 메서드


정적 메서드


  • Number의 정적 메서드는 검사를 실행하는 메서드이며, 모두 true, false를 반환함

  • Number.isFinite(인수) : 인수로 전달된 숫자값이 정상적인 유한수인지 검사 (Infinity, -Infinity가 아닌지 검사)
    • return : true , false
    • NaN은 항상 false
    • 암묵적 타입 변환이 없음 -> 숫자가 아닌 인수는 언제나 false
      • window.isFinite는 암묵적 타입 변환 있음

  • Number.isInteger(인수) : 인수로 전달된 숫자값이 정수인지 검사
    • return : true, false
    • 암묵적 타입 변환 없음

  • Number.isNaN(인수) : 인수로 전달된 숫자값이 NaN인지 검사
    • return : true, false
    • 숫자가 아닌 인수는 언제나 false
    • 암묵적 타입 변환 없음
      • window.isNaN는 암묵적 타입 변환 있음

  • Number.isSafeInteger(인수) : 인수로 전달된 숫자값이 안전한 정수인지 검사
    • return : true, false
    • 안전한 정수값 : -(2^53-1) ~ 2^53-1 사이의 정수값
    • 암묵적 타입 변환 없음

프로토타입 메서드


  • 숫자 리터럴과 함께 프로토타입 메서드를 사용할 경우 에러 발생함
  • Number의 프로토타입 메서드의 경우 모두 문자열을 반환함

  • Number.prototype.toExponential(인수) : 숫자를 지수 표기법으로 변환하여 문자열로 반환
    • 인수 : 지수 표기법에서 소수점 이하로 표현할 자릿수 (기본값 4자리)
    • return : 지수 표기법의 문자열
    • 지수 표기법 : 매우 크거나, 작은 숫자 표기시 사용
      • e 앞에 있는 숫자에 10의 n승을 곱하는 형식으로 수를 나타내는 방식
        • +기호 뒤에 숫자가 몇 승인지를 표시함
        • 예) 77.1234 = 7.71234e+1)
    • 숫자 리터럴인 경우 괄호를 사용하여 묶어 메소드 사용할 것을 추천

  • Number.prototype.toFixed(인수) : 숫자를 반올림하여 문자열로 반환
    • 인수 : 반올림한 결과로 표현할 소수점 이하 자리수 (기본값 0)
    • return : 반올림한 문자열

  • Number.prototype.toPrecision(인수) : 인수로 전달받은 전체 자릿수 까지 유효하도록 나머지 자릿수를 반올림하여 문자열로 반환
    • 인수 : 표현할 전체 숫자 자리수 (0 ~21 정수), 기본값 0
    • 인수로 받은 자리수로 정수 부분을 표현하기 힘든 경우 지수 표기법을 사용함
    • return : 반올림한 문자열 반환

  • Number.prototype.toString(인수) : 숫자를 문자열로 변환하여 반환
    • 인수 : 변환할 진법 (2~36 정수), 기본 10진법



Math


  • 수학적인 상수와 함수를 위한 프로퍼티와 메서드 제공 (생성자 함수가 아님)

Math 프로퍼티


  • Math.PI : 원주율 PI 파이 값을 반환

Math 정적 메서드


  • Math.abs(인수): 인수로 전달된 숫자의 절대값 반환 (0 또는 양수)

    • 인수는 암묵적 변환 있음
      • 인수 생략시 NaN 반환
    • 문자열 숫자 -> 숫자
    • truthy, falsy
      • '', [], null -> 0
      • undefined, {}, 'string' -> NaN

  • Math.round(인수): 인수로 전달된 숫자의 소수점 이하를 반올림한 정수 반환

    • 인수 생략시, NaN 반환

  • Math.ceil(인수): 인수로 전달된 숫자의 소수점 이하를 올림한 정수 반환

    • 인수 생략시, NaN 반환

  • Math.floor(인수): 인수로 전달된 숫자의 소수점 이하를 내림한 정수 반환

    • 인수 생략시, NaN 반환

  • Math.sqrt(인수) : 인수로 전달된 숫자의 제곱근을 반환

    • 음수 제곱근은 없으므로, NaN 반환
    • 인수 생략시, NaN 반환

  • Math.random() : 임의의 난수(0 ~ 1 미만 실수)를 반환

    • 주의) 0포함, 1 불포함
Math.random() * 10; // 0 ~ 10 미만 실수
Math.random() * 10 + 1; // 1 ~ 10.999999 실수
Math.floor(Math.random() * 10 + 1); // 1 ~ 10 포함 정수

  • Math.pow(base, exponent) : 첫번째 인수를 밑, 두번째 인수를 지수로 거듭 제곱한 결과 반환

    • base: 밑
    • exponent: 지수
    • 지수 연산자 사용이 더 깔끔함 (**)

  • Math.max(인수들) : 전달 받은 인수들 중에서 가장 큰 수를 반환함

    • 인수 생략시, -Infinity 반환
    • 배열을 인수로 전달받아 최대값 구하기
      • Math.max.apply(null, 배열) : apply 사용
      • Math.max(...배열) : 스프레드 문법 사용

  • Math.min(인수들) : 전달 받은 인수들 중에서 가장 작은 수를 반환함

    • 인수 생략시, Infinity 반환
    • 배열을 인수로 전달받아 최소값 구하기
      • Math.min.apply(null, 배열) : apply 사용
      • Math.min(...배열) : 스프레드 문법 사용



Date


  • Date는 빌트인 객체면서 생성자 함수임
  • UTC(협정 세계시) : 국제 표준시 (기술 표기에서 사용)
    • GMT(그리니치 평균시) : UTC와 비슷하지만 초의 소수점 단위에서만 차이가 남
  • KST(한국 표준시) : UTC + 9시간
  • 현재 날자 시간은 JS 코드가 실행된 시스템 시계에 의해 결정됨

Date 생성자 함수


  • Date() : Date객체를 반환하지 않고 날짜, 시간 정보 문자열 반환

  • Date 객체 : Date 생성자 함수로 생성한 객체로 내부적으로 날짜,시간을 나타내는 정수값을 갖음
    • 1970.01.01 00:00:00 ~ 현재 날짜 시간 까지의 밀리초를 나타냄
    • 하루 : 정수값 86,400,000 크기 (24h _ 60m _ 60s * 1000ms)
    • 현재 날짜가 아닌 특정 날짜의 경우 생성자 함수에 정보를 인수로 넣어 지정 가능함

  • new Date() : 현재 날짜와 시간을 가지는 Date 객체 반환, 객체를 콘솔에 찍으면 기본적인 정보가 뜸

    • new Date(ms) : 숫자 타입의 밀리초를 인수로 전달시, 시작 기점에서 밀리초 만큼 경과한 날짜, 시간을 나타내는 객체 반환

    • new Date(dateString) : 날짜와 시간을 나타내는 문자열을 인수로 전달시, 해당 날짜의 객체 반환

      • 단, dataString은 Date.parse 메서드로 해석 가능한 형식이여야 함
      • 'May 26, 2020 10:00:00', '2020/03/26/10:00:00'
      • 슬래시(/), 콜론(:) 표기법이 가독성이 좋음 (2020/03/26/10:00:00)

    • new Date(year,month[,day,hour,minute,second,ms]) : 연, 월, 일, 시, 분, 초, 밀리초를 의미하는 숫자를 인수로 전달시, 해당 날짜의 객체 반환 (, 표기법)

      • 연, 월은 필수(생략시, 기준점 객체 반환) (지정하지 않은 옵션은 0 or 1로 초기화됨)
      • year : 1900 이후의 정수/ 0~99는 1900년대로 인식
      • month: 0 ~ 11 (0이 1월임)
      • day: 131, hour: 023, minute: 059, second: 059, ms: 0~999 인 정수

Date 정적 메서드


  • Date.now() : 현재시간 까지 경과한 밀리초를 숫자로 반환
  • Date.parse(인수) : 인수로 전달된 dataString 형식의 날짜까지의 밀리초를 숫자로 반환
  • Date.UTC(인수) : 인수(, 콤마 표기법)로 전달된 시간까지의 밀리초를 숫자로 반환
    • KST가 아닌 UTC로 인식됨

Date 프로토타입 메서드


  • Date.prototype.getFullYear() : Date 객체의 연도를 나타내는 정수 반환
  • Date.prototype.setFullYear(y) : 전달 받은 인수를 Date 객체의 연도를 나타내는 정수를 설정함
    • 옵션으로 '월', '일' 까지도 지정 가능

  • Date.prototype.getMonth() : Date 객체의 월을 나타내는 정수 반환 (0 ~ 11)
  • Date.prototype.setMonth(M) : 전달 받은 인수를 Date 객체의 월을 나타내는 정수로 설정 (0 ~ 11)
    • 옵션으로 '일' 지정 가능

  • Date.prototype.getDate(): Date 객체의 '날(일)'을 나타내는 정수를 반환 (1 ~ 31)
  • Date.prototype.setDate(d) : 전달 받은 인수를 Date 객체의 날을 나타내는 정수로 설정 (1 ~ 31)

  • Date.prototype.getDay(): Date 객체의 '요일'을 나타내는 정수를 반환 (0(일요일) ~ 6)

  • Date.prototype.getHours(): Date 객체의 '시간'을 나타내는 정수를 반환 (0 ~ 23)
  • Date.prototype.setHours(h) : 전달 받은 인수를 Date 객체의 '시간'을 나타내는 정수로 설정 (0 ~ 23)
    • 옵션으로 분, 초, 밀리초 지정 가능

  • Date.prototype.getMinutes(): Date 객체의 '분'을 나타내는 정수를 반환 (0 ~ 59)
  • Date.prototype.setMinutes(m) : 전달 받은 인수를 Date 객체의 '분'을 나타내는 정수로 설정 (0 ~ 59)
    • 옵션으로 초, 밀리초 지정 가능

  • Date.prototype.getSeconds(): Date 객체의 '초'을 나타내는 정수를 반환 (0 ~ 59)
  • Date.prototype.setSeconds(s) : 전달 받은 인수를 Date 객체의 '초'을 나타내는 정수로 설정 (0 ~ 59)
    • 옵션으로 밀리초 지정 가능

  • Date.prototype.getMilliseconds(): Date 객체의 '밀리초'을 나타내는 정수를 반환 (0 ~ 999)
  • Date.prototype.setMilliseconds(ms) : 전달 받은 인수를 Date 객체의 '밀리초'을 나타내는 정수로 설정 (0 ~ 999)

  • Date.prototype.getTime() : 객체의 시간까지 경과된 밀리초를 반환
  • Date.prototype.setTime(인수) : 전달 받은 인수를 객체의 시간까지 경과된 밀리초를 설정

  • Date.prototype.getTimezoneOffset() : UTC와 Date객체의 로케일(locale) 시간과 차이를 분단위로 반환

  • Date.prototype.toDateString() : 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 날짜를 반환
    • 날짜 까지임 시간은 제외

  • Date.prototype.toTimeString() : 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 시간을 반환
    • 날짜 제외 시간만 반환

  • Date.prototype.toISOString() : ISO 8601 형식으로 날짜, 시간 모두 표현한 문자열 반환
    • 2020-07-24t03:30:00.000Z

  • Date.prototype.toLocaleString(locale) : 인수로 전달한 로케일을 기준으로, Date객체의 날짜 시간을 표현한 문자열로 반환
    • 인수 생략시, 브라우저가 동작 중인 시스템의 로캘 적용
    • 'ko-KR', 'en-US', 'ja-JP'

  • Date.prototype.toLocaleTimeString(locale) : 인수로 전달한 로케일을 기준으로 객체의 시간을 표현한 문자열로 반환



RegExp (정규 표현식)


정규 표현식


  • 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어(formal language)
  • 패턴 매칭 기능 : 특정 패턴과 일치하는 문자열 검색, 추출, 치환 기능
  • 반복문, 조건문 없이 패턴으로 간단하게 테스트 하게 해줌

정규 표현식 생성


  • 정규 표현식 리터럴 :
    • /Pattern/Flags
  • RegExp 생성자 함수
    • new RegExp(pattern, [, flags])

RegExp를 사용하는 메서드


  • RegExp.prototype.exec(stringTarget) : 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 배열로 반환 (결과가 없으면 null 반환)

    • g플래그를 달아도, 첫번째 매칭 결과만 반환
    • ["is", index: 5, input: "Is this all there is?", group: undefined]

  • RegExp.prototype.test(stringTarget) : 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언으로 반환

  • String.prototype.match(RegExp): 인수로 전달받은 정규표현식과 대상 문자열의 매칭 결과를 배열로 반환

    • g플래그를 달면, 모든 매칭 결과를 배열로 반환함
      • g플래그 X -> ["is", index: 5, input: "Is this all there is?", group: undefined]
      • g플래그 O -> ["is", "is"]

플래그


  • 검색 방식 설정
    • 기본값 : 대소문자 구별, 첫번째 매칭한 대상만 검색
    • i (ignore case) : 대소문자 구별하지 않고 패턴 검색
    • g (global) : 패턴과 일치하는 모든 문자열 전역 검색
    • m (multi line) : 문자열의 행이 바뀌더라도 패턴 검색을 계속함

패턴


  • 메타문자(meta character) 기호
  • 매치 (match) : 문자열 내에, 패턴과 일치하는 문자열이 존재하는 것

검색


  • 문자열 검색
    • 정규표현식을 생성후 RegExp 메서드를 활용해야 검색이 수행됨

  • 임의 문자열 검색, .
    • . : 임의 문자 한개를 의미, 즉 자리수를 나타냄

  • 반복 검색 -> {}, +, ?
    • A{m,n} : A가 최소 m ~ 최대 n 번 반복되는 문자열 (콤마뒤 공백 없게 주의)
      • A{m} : A가 m번 반복되는 문자열
      • A{m,} : A가 최소 m번 반복되는 문자열
    • A+ : A가 최소 한번 이상 반복되는 문자열 A{1,}과 같음
    • A? : A가 있거나 없는 문자열
    • A* : A가 있거나 없거나 많거나

  • OR 검색 -> | , [], -

    • A|B : A또는 B를 포함한 문자열
      • [AB] : 문자 하나하나 모두 or로 동작 A|B와 같음
    • A+|B+ : A한번이상 반복 또는 B한번이상 반복, 단어 레벨 검색 [AB]+ 와 같음
    • [A-Z] : - 는 범위 지정이 가능함 알파벳 A에서 Z까지 대문자 범위
      • [a-z] : 알바벳 소문자 범위
      • [0-9] : 숫자 0에서 9 범위
    • \d : 숫자를 의미 0-9
    • \D : 문자를 의미
    • \w : 알파벳, 숫자, 언더스코어 [A-Za-z0-9_]
    • \W : 알파벳, 숫자, 언더스코어가 아닌 문자 (공백, 콤마, $, %, & 등...)
    • \s : 여러가지 공백 문자를 의미 (\t, \r, \n, \v, \f)

  • NOT 검색 -> [^] 대괄호 안

    • [^A]: A를 제외한 문자
    • [^0-9] : [\D]
    • [^A-Za-z0-9_] : [\W]

  • 시작 위치로 검색 -> ^[] 대괄호 밖
    • 해당 패턴으로 시작하는지 검색
    • ^AB : AB로 시작하는지 검사

  • 마지막 위치로 검색 -> $
    • 해당 패턴으로 끝나는지 검색
    • AB$ : AB로 끝나는지 검사

자주 사용하는 정규 표현식 검사


  • 특정 단어로 시작하는지 검사
    • http:// or https:// -> /https?:\/\//, /(http|https):\/\//

  • 특정 단어로 끝나는지 검사
    • html로 끝나는지 검사 -> /html$/

  • 숫자로만 이루어진 문자열인지 검사
    • /^\d+$/ (^ 시작, $ 끝)

  • 하나 이상의 공백으로 시작하는지 검사
    • /^[\s]+/

  • 아이디로 사용 가능한지 검사
    • 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4~10자리 -> /^[A-Za-z0-9]{4,10}$/

  • 메일 주소 형식에 맞는지 검사
    • /^[A-Za-z0-9]([-_\.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_\.]?[A-Za-z0-9])*\.[a-zA-Z]{2,3}$/

  • 핸드폰 번호 형식에 맞는지 검사
    • /^\d{3}-\d{3,4}-\d{4}$/

  • 특수 문자 포함 여부 검사
    • /[^A-Za-z0-9]/gi
    • 특수 문자 제거시 string의 replace 메서드 사용
      • target.replace(/[^A-Za-z0-9]/gi, '')



String


String 생성자 함수


  • new String(인수) : new 키워드와 호출시 [[StringData]] 내부 슬롯에 인수로 전달받은 문자열을 할당한 String 래퍼 객체를 생성함
    • 인수를 전달하지 안하면 -> 빈 문자열을 할당함
    • 문자열이 아닌 값을 인수로 전달시 -> 문자열로 강제 변환한 값을 할당함
    • String {length: 0, [[PrimitiveValue]]}
    • [[StringData]] = [[PrimitiveValue]]

  • String 래퍼 객체 :
    • length 프로퍼티와 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로, 각 문자를 프로퍼티 값으로 갖는 유사 배열객체이면서, 이터러블 임
      • -> 인덱스를 사용해서 각 문자에 접근 가능
    • 문자열은 원시 값이므로 변경할 수 없음 -> 동적으로 값 할당 불가
      • 할당하려고 하면 error는 발생하지 않지만, 변경되진 않음
      • 변경 불가능한 값이기 때문에, 읽기 전용 객체로 제공됨
      • writable 프로퍼티 어트리뷰트 값이 false

  • String(인수) : new 연산자 없이 호출하는 경우, 인수를 문자열로 변환해서 반환
    • String()을 통해 명시적으로 타입을 변환하기도 함

  • length 프로퍼티 : 문자열의 문자 개수 반환



String 메서드


  • String 래퍼 객체는 읽기 전용 객체 임

    • -> String 메서드 중에 원본을 직접 변경하는 메서드는 없음
    • -> 언제나 새로운 문자열을 반환함(읽기 전용)

  • String.prototype.indexOf(searchValue, searchStartIndex)
    • 인수로 전달받은 문자열(searchValue)을 검색하여 첫 번째 인덱스 반환, 검색 실패시 -1 반환
    • 두번 째 인수(searchStartIndex)로 검색 시작 인덱스 설정 가능
    • 대상 문자열에 특정 문자열 존재 확인시 유용
    • String.prototype.includes 사용시 가독성이 좋음

  • String.prototype.search(RegExp)
    • 인수로 전달받은 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스 반환
    • 검색 실패시 -1 반환

  • String.prototype.includes(searchValue, searchStartIndex)
    • 전달 받은 인수(searchValue) 문자열이 래퍼객체에 포함되어 있는지 확인하여 true or false를 반환

  • String.prototype.startsWith(searchValue, searchStartIndex)
    • 대상 문자열이 인수로 전달받은 문자열로 시작하는지 확인하여 그 결과를 true, false로 반환

  • String.prototype.endsWith(searchValue, searchStartIndex)
    • 대상 문자열이 인수로 전달받은 문자열로 끝나는지 확인하여 그 결과를 true, false로 반환

  • String.prototype.charAt(index)
    • 대상 문자열에서 인수로 전달받은 인덱스에 위치한 문자를 검색하여 반환
    • 인덱스가 문자열의 범위를 벗어난 정수 -> 빈 문자열 반환
    • String.prototype.charCodeAt(), String.prototype.codePointAt() 이 비슷한 역할을 함

  • String.prototype.substring(startIndex, endIndex)
    • startIndex 부터 endIndex 이전 까지의 부분 문자열을 반환
    • endIndex 생략시, startIndex부터 문자열 끝까지 반환
      • startIndex > endIndex -> 교차되어 해당 범위의 문자열 반환
      • 인수가 음수 또는 NaN인 경우 -> 0으로 인식하여 계산
      • 인수 > 문자열 길이 -> 해당 인덱스를 기준으로 계산
    • 인수가 서로 유연하게 작용함
    • indexOf와 사용시 특정 문자열 기준으로 주위의 문자열을 취득할 수 있음

  • String.prototype.slice(startIndex, endIndex)
    • startIndex ~ endIndex 전 까지의 부분 문자열 반환
    • substring과 똑같이 동작하지만, 인수가 음수 인덱싱을 지원함

  • String.prototype.toUpperCase()
    • 대상(래퍼) 문자열를 모두 대문자로 변경한 문자열을 반환

  • String.prototype.toLowerCase()
    • 대상(래퍼) 문자열를 모두 소문자로 변경한 문자열을 반환

  • String.prototype.trim()
    • 대상 문자열 앞뒤에 공백 문자를 제거한 문자열 반환
    • String.prototype.trimStart(), String.prototype.trimEnd() -> 앞 뒤 선택적으로 공백 제거 가능
    • String.prototype.replace(/\s/g, '')를 활용해서 공백 제거 가능

  • String.prototype.repeat(count)
    • 대상 문자열을 전달받은 인수(count) 정수만큼 반복해 연결한 새로운 문자열을 반환
    • count = 0 -> 빈 문자열 반환
    • count < 0 -> RangeError 발생
    • count 생략시 기본값 0

  • String.prototype.replace((String||RegExp), (StringValue||Callback))
    • 변경할 문자(string or RegExp)를 찾아 특정 문자(stringValue)로 치환한 문자열을 반환
      • 첫번째 인수 : 문자열 또는 정규표현식을 받아, 변경할 문자를 찾음
        • 문자열을 넣어 검색된 문자열이 다수인 경우, 첫번째로 발견한 문자가 기준이 됨
        • 정규표현식을 넣어 검색된 문자열이 다수인 경우, 모두 기준이 되어 치환됨
      • 두번째 인수 :
        • 두번째 인수가 문자열인 경우 첫번째 인수를 통해찾은 문자를 치환할 문자
        • 두번째 인수가 치환 함수인 경우, 첫번째 인수를 통해 찾은 결과를 치환함수에 전달하여 호출하여 반환된 결과와 매치결과를 치환함
function camelToSnake(camelCase) {
  return camelCase.replace(/.[A-Z]/, (match) => {
    console.log(match); // 소문자 대문자 만나는 2개의 문자열
    return match[0] + "_" + match[1].toLowerCase();
  });
}

  • String.prototype.split((String||RegExp), ArrayLength)
    • 대상 문자열에서 전달된 인수(String, RegExp)에 맞는 문자열을 구분자로 하여 분리하여 하나의 배열로 반환
    • 두번째 인수로 변환된 배열의 길이를 지정할 수 있음
    • Array.prototype.reverse, Array.prototype.join을 사용하면 문자열을 뒤집을 수 있음
표기 내용
indexOf(searchValue, searchStartIndex) 검색하여 첫 번째 인덱스 반환
search(RegExp) 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스 반환
includes(searchValue, searchStartIndex) 문자열이 래퍼객체에 포함되어 있는지 확인하여 true or false를 반환
startsWith(searchValue, searchStartIndex) 전달받은 문자열로 시작하는지 확인하여 그 결과를 true, false로 반환
endsWith(searchValue, searchStartIndex) 전달받은 문자열로 끝나는지 확인하여 그 결과를 true, false로 반환
charAt(index) 전달받은 인덱스에 위치한 문자를 검색하여 반환
substring(startIndex, endIndex) startIndex 부터 endIndex 이전 까지의 부분 문자열을 반환
slice(startIndex, endIndex) startIndex ~ endIndex 전 까지의 부분 문자열 반환(음수 지원)
toUpperCase() 문자열를 모두 대문자로 변경한 문자열을 반환
toLowerCase() 문자열를 모두 소문자로 변경한 문자열을 반환
trim() 문자열 앞뒤에 공백 문자를 제거한 문자열 반환
repeat(count) 인수(count) 정수만큼 반복해 연결한 새로운 문자열을 반환
replace((String || RegExp), (StringValue || Callback)) 변경할 문자(string or RegExp)를 찾아 특정 문자(stringValue, callback)로 치환한 문자열을 반환
split((String || RegExp), ArrayLength) 전달된 인수(String, RegExp)에 맞는 문자열을 구분자로 하여 분리하여 하나의 배열로 반환

'JavaScript' 카테고리의 다른 글

20210716 JavaSciprt DeepDive 14 : DOM, 요소 노드 취득, HTMLCollection, NodeList, 텍스트 노드, 노드 탐색, texContent, XXS, 노드 조작, 어트리뷰트, DOM 프로퍼티, 스타일, 클래스 조작  (0) 2021.07.16
20210714 JavaSciprt DeepDive 12 : Symbol, 이터러블(Iterable), 스프레드 문법, 디스트럭처링 할당(구조 분해 할당)  (0) 2021.07.14
20210712 JavaSciprt DeepDive 10 : 배열 고차 함수, sort, forEach, map, filter, reduce, some, every, find, findIndex, flatMap  (0) 2021.07.12
20210711 JavaSciprt DeepDive 09 : 배열, JS배열, 배열 생성, CRUD, 배열 메서드, 스택(stack) 구현, 큐(queue) 구현  (0) 2021.07.12
20210709 JavaSciprt DeepDive 08 : ES6 메서드(축약표현), 화살표 함수, Rest 파라미터, 매개변수 기본값  (0) 2021.07.09

'JavaScript' Related Articles

티스토리툴바