js 뽀개기 - 표준 빌트인 객체(1)

로건·2022년 11월 22일
JavaScriptjs
1

javascript 뽀개기

목록 보기
1/1

Number

💡 래퍼객체
래퍼객체란 원시 타입에 대응되는 객체이다.
원시값에 내장메서드를 이용하게되면 잠시 객체 값으로 임시변환해주는데 이를 래퍼객체라고 한다.(new + 생성자함수로 직접 생성할 수도 있다.)
내장메서드를 사용할때 순간적으로 사용했다가 사라진다.


Number 생성자 함수

new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0을 할당한 Number 래퍼 객체를 생성한다.
-> 만약 생성자 함수의 인수로 숫자를 전달한다면 인수로 전달받은 숫자를 할당한 객체를 생성한다.
-> 인수로 숫자가 아닌 값을 전달하면 숫자로 강제변환한다. 숫자가 아니라면 NAN이 저장된다. 

const numObj1 = new Number();
console.log(numObj1); // Number {[[PrimitiveValue]]: 0}

const numObj2 = new Number(10);
console.log(numObj2); // Number {[[PrimitiveValue]]: 10}

let numObj3 = new Number('10');
console.log(numObj3); // Number {[[PrimitiveValue]]: 10}
numObj3 = new Number('Hello');
console.log(numObj3); // Number {[[PrimitiveValue]]: NaN}

Number 프로퍼티

  1. Number.EPSILON
    • 1과 1보다 큰 숫자 중에서 가장 작은 숫자와의 차와 같다.
    • 부동 소수점으로 발생하는 오차를 해결하기 위해 사용
  2. Number.MAX_VALUE
    • js에서 표현할 수 있는 가장 큰 양수 값
    • 이 수보다 큰 숫자는 Infinitiy이다.
  3. Number.MIN_VALUE
    • js에서 표현할 수 있는 가장 작은 양수 값이다.
    • 이보다 가장 작은 숫자는 0이다.
  4. Number.MAX_SAFE_INTEGER
    • js에서 안전하게 표현할 수 있는 가장 큰 정수값이다.
  5. Number.MIN_SAFE_INTEGER
    • js에서 안전하게 표현할 수 있는 가장 작은 정수값이다.
  6. Number.POSITIVE_INFINITY
    • 양의 무한대를 나타내는 숫자값 Infinity와 같다.
  7. Number.NEGATIVE_INFINITY
    • 음의 무한대를 나타내는 숫자값 -Infinity와 같다.
  8. Number.NaN
    • 숫자가 아님을 나타내는 숫자값이다. window.NaN와 같다.

Number 메서드

  1. Number.isFinite
    • ES6에 도입된 메서드로 인수로 전달된 숫자값이 유한수 인지를 판별하여 true/false를 반환한다.
    • 인수가 NaN이면 언제나 false
    • 빌트인 전역 함수 isFinite와 차이가 있다. -> Number.isFinite는 숫자가 아니면 무조건 false isFinite는 암묵적 타입변환을 시행해줌.
      Number.isFinite(0);                // -> true
Number.isFinite(Number.MAX_VALUE); // -> true
Number.isFinite(Infinity);  // -> false
  2. Number.isInteger
    • ES6에 도입된 메서드로 정수인지를 검사한다.
    • 암묵적 타입 변환 X
      Number.isInteger(123)   // -> true
Number.isInteger('123') // -> false
Number.isInteger(Infinity)  // -> false
  3. Number.isNaN
    • NaN인지를 검사한다.
    • 빌트인 전역 함수 isNaN과 차이가 있다. 빌트인 함수는 전달받은 인수를 숫자로 암묵적 타입변환을 진행한다.
    • 빌트인 전역 함수 isNaN은 undefined의 경우 true를 뿜는다.
  4. Number.isSafeInteger
    • 안전한 정수인지 검사한다. -(2^53 - 1) < x < 2^53 - 1 x가 안전한 정수다.
    • 암묵적 타입 변환 X
  5. Number.prototype.toExponential
    • 지수 표기법(10 n승으로 표기)으로 변환하여 문자열로 반환한다.
    • 인수로 소주점 이하로 표현할 자릿수를 전달할 수 있다.
    • 그룹 연산자를 사용하지 않으면 접근 연사자인지 부동소수점 표시인지 js엔진이 알아차릴 수 없으므로 그룹연산자를 사용해야한다.(공백을 이용하면 접근 연사자로 해석하니 가능하긴 하다.)
      (77.1234).toExponential();  // -> "7.71234e+1"
(77.1234).toExponential(4); // -> "7.7123e+1"
(77.1234).toExponential(2); // -> "7.71e+1"
77.toExponential(); // -> SyntaxError: Invalid or unexpected token
77 .toExponential(); // -> "7.7e+1"
  6. Number.prototype.toFixed
    • 숫자를 반올림하여 문자열로 반환한다.
    • 반올림하는 소수점 이하 자릿수를 나타내는 0~20 사이의 정수값을 인수로 전달할 수 있다.
      // 소수점 이하 반올림. 인수를 생략하면 기본값 0이 지정된다.
(12345.6789).toFixed(); // -> "12346"
// 소수점 이하 1자리수 유효, 나머지 반올림
(12345.6789).toFixed(1); // -> "12345.7"
// 소수점 이하 2자리수 유효, 나머지 반올림
(12345.6789).toFixed(2); // -> "12345.68"
  7. Number.prototype.toPrecision
    • 인수로 전달받은 전체 자릿수까지 유효하도록 나머지 자릿수를 반올림하여 문자열로 반환한다.
    • 전체 자릿수를 나타내는 0~21 사이의 정수값을 인수로 전달할 수 있다.
      (12345.6789).toPrecision(); // -> "12345.6789"
// 전체 1자리수 유효, 나머지 반올림
(12345.6789).toPrecision(1); // -> "1e+4"
// 전체 2자리수 유효, 나머지 반올림
(12345.6789).toPrecision(2); // -> "1.2e+4"
  8. Number.prototype.toString
    • 숫자를 문자열로 반환한다.
    • 진법을 나타내는 2~36 사이의 정수값을 인수로 전달할 수 있고 기본값은 10진법이다.
      (10).toString(); // -> "10"
// 2진수 문자열을 반환한다.
(16).toString(2); // -> "10000"
// 8진수 문자열을 반환한다.
(16).toString(8); // -> "20"


Math

수학적인 상수와 함수를 위한 프로퍼티와 메서드를 제공한다. Math는 생성자 함수가 아니기 때문에 정적 프로퍼티와 정적 메서드만 제공한다.


Math 프로퍼티

Math.PI 는 원주율 PI값을 반환한다.

Math.PI; // -> 3.141592653589793

Math 메서드

  1. Math.abs

    • 인수로 전달된 숫자의 절대값을 반환한다.
    • 암묵적 타입 변환 O
      Math.abs(-1);        // -> 1
Math.abs('');        // -> 0
Math.abs([]);        // -> 0
Math.abs(null);      // -> 0
Math.abs(undefined); // -> NaN
Math.abs({});        // -> NaN
Math.abs('string');  // -> NaN
Math.abs();          // -> NaN

  2. Math.round

    • 소수점 이하를 반올림한 정수를 반환
    • 암묵적 타입 변환 O
      Math.round(1.4);  // -> 1
Math.round(1.6);  // -> 2
Math.round(-1.4); // -> -1

  3. Math.ceil

    • 소수점 이하를 올림 정수를 반환
    • 암묵적 타입 변환 O

  4. Math.floor

    • 소수점 이하를 내림한 정수를 반환
    • 암묵적 타입 변환 O

  5. Math.sqrt

    • 숫자의 제곱근을 반환한다.
    • 암묵적 타입 변환 O
      Math.sqrt(9);  // -> 3
Math.sqrt(-9); // -> NaN
Math.sqrt(2);  // -> 1.414213562373095

  6. Math.random

    • 임의의 난수를 반환 0 <= x < 1
      Math.random();

  7. Math.pow

    • 첫번째 인수를 밑으로 두 번째 인수를 지수로 거듭제곱한 결과를 반환한다.
    • ES7에서 도입된 지수 연산자를 사용하면 가독성이 더 좋다.
    • 암묵적 타입 변환 O
      Math.pow(2, 8);  // -> 256
Math.pow(2, -1); // -> 0.5
// ES7 지수 연산자
2 ** 2 ** 2; // -> 16

  8. Math.max

    • 전달받은 인수 중 가장 큰 수를 반환한다.(인수를 전달하지 않으면 -Infinity 반환)

    • 배열을 인수로 전달받는 방법도 있다.

      Math.max(1); // -> 1
Math.max(1, 2); // -> 2
Math.max(1, 2, 3); // -> 3
// 배열 요소 중에서 최대값 취득
Math.max.apply(null, [1, 2, 3]); // -> 3

// ES6 스프레드 문법
Math.max(...[1, 2, 3]); // -> 3

  9. Math.min

    • 전달받은 인수 중 가장 작은 수를 반환한다.(인수를 전달하지 않으면 Infinity 반환)


Date

Date는 날짜와 시간을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수이다.
UTC(협정 세계시)는 국제 표준시, GMT(그리니치 평균시)로 불리기도 한다. KST(한국 표준시간)은 UTC에 9시간을 더한 시간이다.
현재 날짜와 시간은 코드가 실행된 시스템의 시계에 의해 결정된다.


Date 생성자 함수

  1. new Date()

    • 현재 날짜와 시간을 가지는 Date 객체를 반환한다.
    • Date객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖지만 출력시 날짜와 시간 정보를 출력한다.
    • new를 사용하면 객체가 아닌 문자열로 반환한다.
      new Date(); // -> Mon Jul 06 2020 01:03:18 GMT+0900 (대한민국 표준시)
Date(); // -> "Mon Jul 06 2020 01:10:47 GMT+0900 (대한민국 표준시)"

  2. new Date(milliseconds)

    • 밀리초를 인수로 전달하면 1970년 1월 1일 00:00:00(UTC)을 기점으로 전달된 밀리초만큼 경과된 날짜와 시간을 나타내는 Date객체를 반환한다.
      new Date(86400000); // -> Fri Jan 02 1970 09:00:00 GMT+0900 (대한민국 표준시)

  3. new Date(dateString)

    • 날짜와 시간을 나타내는 문자열을 인수로 전달하면 지정된 날짜의 Date 객체를 반환한다.
    • 이때 전달한 문자열은 Date.parse 메서드에 의해 해석가능한 형식이어야한다.
      new Date('May 26, 2020 10:00:00');
// -> Tue May 26 2020 10:00:00 GMT+0900 (대한민국 표준시)

  4. new Date(year, month[,day, hour, minute, second, millisecond])

    • 연,월,일,시,분,초,밀리초를 인수로 전달하면 지정된 날짜와 시간을 나타내는 객에를 반환한다.

    • 연, 월은 필수이며 지정하지 않은 옵션은 0 또는 1로 초기화한다.

      // 월을 나타내는 2는 3월을 의미한다. 2020/3/1/00:00:00:00
new Date(2020, 2);
// -> Sun Mar 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
// 월을 나타내는 2는 3월을 의미한다. 2020/3/26/10:00:00:00
new Date(2020, 2, 26, 10, 00, 00, 0);
// -> Thu Mar 26 2020 10:00:00 GMT+0900 (대한민국 표준시)

// 다음처럼 표현하면 가독성이 훨씬 좋다.
new Date('2020/3/26/10:00:00:00');
// -> Thu Mar 26 2020 10:00:00 GMT+0900 (대한민국 표준시)

Date 메서드

  1. Date.now

    • 기준시간(1970년 1월 1일 00:00:00(UTC))을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환한다.

  2. Date.parse

    • 기준시간을 기점으로 인수로 전달된 지정시간까지의 밀리초를 숫자로 반환한다.

      // UTC
Date.parse('Jan 2, 1970 00:00:00 UTC'); // -> 86400000

// KST
Date.parse('Jan 2, 1970 09:00:00'); // -> 86400000

// KST
Date.parse('1970/01/02/09:00:00');  // -> 86400000

  3. Date.UTC

    • 기준시간을 기점으로 인수로 전달된 지정시간까지의 밀리초를 숫자로 반환한다.
    • new Date(year, month, ...) 와 같은 형식의 인수를 사용해야한다.
    • 인수는 로컬 타임이 아닌 UTC로 인식된다.

  4. Date.prototype.getFullYear

    • Date 객체의 연도를 나타내는 정수를 반환한다.

  5. Date.prototype.setFullYear

    • Date 객체에 연도를 나타내는 정수를 설정한다. 연도 이외에 옵션으로 월,일도 설정할 수 있다.

  6. Date.prototype.getMonth

    • Date 객체의 월을 나타내는 0~11의 정수를 반환한다.

  7. Date.prototype.setMonth

    • Date 객체의 월을 설정한다. 월 이외에 일도 설정할 수 있다.

  8. Date.prototype.getDate

    • Date 객체의 날짜를 나타내는 정수를 반환한다.

  9. Date.prototype.setDate

    • Date 객체의 날짜를 설정한다.

  10. Date.prototype.getDay

    • Date 객체의 요일을(0~6) 정수로 반환한다. 0이 일요일, 6이 토요일이다.

  11. Date.prototype.getHours

    • Date 객체의 시간(0 ~ 23)을 나타내는 정수를 반환한다.

  12. Date.prototype.setHours

    • Date 객체의 시간을 설정한다. 분, 초, 밀리초도 설정할 수 있다.

  13. Date.prototype.getMinutes

    • Date 객체의 분(0 ~ 59)을 나타내는 정수를 반환한다.

  14. Date.prototype.setMinutes

    • Date 객체의 분을 설정한다. 초, 밀리초도 설정할 수 있다.

  15. Date.prototype.getSeconds

    • Date 객체의 초(0 ~ 59)를 나타내는 정수를 반환한다.

  16. Date.prototype.setSeconds

    • Date 객체의 초을 설정한다. 밀리초도 설정할 수 있다.

  17. Date.prototype.getMilliseconds

    • Date 객체의 밀리초(0 ~ 999)를 나타내는 정수를 반환한다.

  18. Date.prototype.setMilliseconds

    • Date 객체의 밀리초을 설정한다.

  19. Date.prototype.getTime

    • 기준점을 기점으로 Date 객체의 시간까지 경과된 밀리초를 반환한다.

  20. Date.prototype.setTime

    • 기준점을 기점으로 Date 객체의 시간까지 경과된 밀리초를 설정한다.

  21. Date.prototype.getTimezoneOffset

    • UTC와 Date 객체에 지정된 로캘 시간과의 차이를 분 단위로 반환한다.

      const today = new Date(); // today의 지정 로캘은 KST다.

//UTC와 today의 지정 로캘 KST와의 차이는 -9시간이다.
today.getTimezoneOffset() / 60; // -9

  22. Date.prototype.toDateString

    • 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 날짜를 반환한다.

  23. Date.prototype.toTimeString

    • 사람이 읽을 수 있는 형식의 문자열로 Date 객체의 시간를 반환한다.

  24. Date.prototype.toISOString

    • ISO 8601 형식으로 Date 객체의 날짜와 시간을 표현한 문자열을 반환한다.

  25. Date.prototype.toLocaleString

    • 인수로 전달한 로캘을 기준으로 Date 객체의 날짜와 시간을 표현한 문자열을 반환한다.

    • 인수가 생략되면 동작 중인 시스템의 로캘을 적용한다.

      const today = new Date('2020/7/24/12:30');

today.toString(); // -> Fri Jul 24 2020 12:30:00 GMT+0900 (대한민국 표준시)
today.toLocaleString(); // -> 2020. 7. 24. 오후 12:30:00
today.toLocaleString('ko-KR'); // -> 2020. 7. 24. 오후 12:30:00


RegExp

💡 정규 표현식(regular expression)
일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어.
문자열을 대상으로 패턴 매칭 기능을 제공한다.(특정 패턴과 일치하는 문자열을 검색하거나 추출, 치환 가능한 기능)
반복문과 조건문 없이 패턴을 정의하고 테스트하는 것으로 간단히 체크할 수 있다.
주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다는 문제가 있다.


정규 표현식의 생성

정규 표현식 리터럴과 RegExp 생성자 함수를 사용해 생성할 수 있다.
정규 표현식 리터럴은 패턴과 플래그로 구성된다. 

const target = 'Is this all there is?';

// 패턴: is
// 플래그: i => 대소문자를 구별하지 않고 검색한다.
const regexp1 = /is/i;
// ES6의 RegExp 생성자 함수 이용
const regexp2 = new RegExp(/is/i); // ES6

// test 메서드는 target 문자열에 대해 정규표현식 regexp의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.
regexp1.test(target); // -> true
regexp2.test(target); // -> true

RegExp 메서드

  1. RegExp.prototype.exec

    • 인수로 전달받은 문자열에 대해 패턴을 검색하여 매칭 결과를 배열로 반환한다.
    • 결과가 없는 경우 null을 반환한다.
      const target = 'Is this all there is?';
const regExp = /is/;
regExp.exec(target); // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

  2. RegExp.prototype.test

    • 인수로 전달받은 문자열에 대해 정규 표현식의 패턴을 검색하여 매칭 결과를 불리언 값으로 반환한다.

      const target = 'Is this all there is?';
const regExp = /is/;

regExp.test(target); // -> true

  3. String.prototype.match

    • 대상 문자열로 인수로 전달받은 정규표현식과의 매칭결과를 배열로 반환한다.

    • g 플래그를 지정하면 모든 매칭결과를 배열로 반환한다.

      const target = 'Is this all there is?';
const regExp = /is/;
target.match(regExp); // -> ["is", index: 5, input: "Is this all there is?", groups: undefined]

const regExp2 = /is/g;
target.match(regExp2); // -> ["is", "is"]

플래그

패턴과 함께 정규 표현식을 구성하는 플래그는 정규 표현식의 검색 방식을 설정하기 위해 사용한다.
총 6개가 있다.

  1. i
    • Ignore case : 대소문자를 구별하지 않고 패턴 검색
  2. g
    • Global : 대상 문자열 내에서 패턴과 일치하는 모든 문자열을 전역 검색
  3. m
    • Multi line : 문자열의 행이 바뀌더라도 패턴 검색을 계속한다.

패턴

문자열의 일정한 규칙을 표현하기 위해 사용한다.
/로 열고 닫으며 문자열의 따옴표는 생략한다. 따옴표를 포함한다면 따옴표도 패턴에 포함된다.

  1. 임의의 문자열 검색

    • . 은 임의의 문자 한 개를 의미한다.

      const target = 'Is this all there is?';

// 임의의 3자리 문자열을 대소문자를 구별하여 전역 검색한다.
const regExp = /.../g;

target.match(regExp); // -> ["Is ", "thi", "s a", "ll ", "the", "re ", "is?"]

  2. 반복 검색

    • {m,n}은 최소 m번, 최대 n번 반복되는 문자열을 의미한다.

    • {n}은 {n,n}과 같다.

    • {n,}은 최소 n번 이상 반복되는 문자열을 의미한다.

    • +는 {1,}와 같다.

    • ?는 {0,1}과 같다.

    • 콤마 뒤에 공백이 있으면 정상 동작하지 않으므로 주의해야한다.

      const target = 'A AA B BB Aa Bb AAA';
// 'A'가 최소 1번, 최대 2번 반복되는 문자열을 전역 검색한다.
const regExp = /A{1,2}/g;
target.match(regExp); // -> ["A", "AA", "A", "AA", "A"]

const target2 = 'color colour';
// 'colo' 다음 'u'가 최대 한 번(0번 포함) 이상 반복되고 'r'이 이어지는 문자열 'color', 'colour'를 전역 검색한다.
const regExp2 = /colou?r/g;

target2.match(regExp2); // -> ["color", "colour"]

  3. OR 검색

    • |은 or의 이미를 갖는다.
    • [] 내의 문자는 or로 동작한다
    • 범위를 지정하려면 [] 내에 -를 사용한다.
    • [\d]는 숫자를 의미한다.( = [0-9])
    • [\D]는 숫자가 아닌 문자를 의미한다.
    • [\w]는 알파벳, 숫자, 언더스코어를 의미한다.( = [A-Za-z0-9_])
    • [\W]는 알파벳, 숫자, 언더스코어가 아닌 문자를 의미한다.

  4. NOT 검색

    • ^은 not의 의미를 가진다
    • [^0-9]는 숫자를 제외한 문자를 의미힌다.

  5. 시작 위치로 검색

    • [] 밖의 ^은 문자열의 시작을 의미한다.
      const target = 'https://poiemaweb.com';
// 'https'로 시작하는지 검사한다.
const regExp = /^https/;
regExp.test(target); // -> true

  6. 마지막 위치로 검색

    • $는 문자열의 마지막을 의미한다.
      const target = 'https://poiemaweb.com';
// 'com'으로 끝나는지 검사한다.
const regExp = /com$/;
regExp.test(target); // -> true

자주 사용하는 정규표현식

  1. 아이디로 사용 가능한지 검사

    • 알파벳 대소문자, 숫자로 시작하고 끝나며 4~10자리인지 검사

      const id = 'abc123';

// 알파벳 대소문자 또는 숫자로 시작하고 끝나며 4 ~ 10자리인지 검사한다.
/^[A-Za-z0-9]{4,10}$/.test(id); // -> true

  2. 메일 주소 형식에 맞는지 검사

    • 인터넷 메시지 형식 규약인 RFC 5322에 맞는 정교한 패턴 매칭이 필요하다면 매우 복잡하다.

    • 아래는 위 형식과 맞지는 않다.

      const email = 'ungmo2@gmail.com';

/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/.test(email); // -> true

  3. 핸드폰 번호 형식에 맞는지 검사

    const cellphone = '010-1234-5678';

/^\d{3}-\d{3,4}-\d{4}$/.test(cellphone); // -> true

  4. 특수 문자 포함 여부 검사

    const target = 'abc#123';

// A-Za-z0-9 이외의 문자가 있는지 검사한다.
(/[^A-Za-z0-9]/gi).test(target); // -> true


String

표준 빌트인 객체인 String 객체는 생성자 함수 객체다.
String 생성자 함수에 인수를 전달하지 않고 new와 함게 호출하면 [[SrringData]] 내부 슬록에 빈 문자열을 할당한 String 래퍼 객체를 생성한다.
유사배열 객체이면서 이터러블이므로 인덱스를 사용하여 각문자에 접근이 가능한다.


String 메서드

String 객체에는 원본 래퍼 객체를 직접 변경하는 메서드는 존재하지 않는다.
String 객체의 메서드는 언제나 새로운 문자열을 반환한다.
문자열은 변경불가능한 값이기 때문에 String 래퍼 객체도 읽기 전용 객체로 제공된다.

  1. String.prototype.indexOf

    • 대상 문자열에서 인수로 전달받은 문자열을 검색하여 첫 번째 인덱스를 반환한다.

    • 검색 실패 시 -1 을 반환한다.

    • 두 번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

      const str = 'Hello World';

// 문자열 str에서 'l'을 검색하여 첫 번째 인덱스를 반환한다.
str.indexOf('l'); // -> 2
// 문자열 str에서 'or'을 검색하여 첫 번째 인덱스를 반환한다.
str.indexOf('or'); // -> 7
// 문자열 str의 인덱스 3부터 'l'을 검색하여 첫 번째 인덱스를 반환한다.
str.indexOf('l', 3); // -> 3

  2. String.prototype.search

    • 인수로 전달 받은 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스를 반환한다.

    • 검색 실패 시 -1 을 반환한다.

      const str = 'Hello world';

// 문자열 str에서 정규 표현식과 매치하는 문자열을 검색하여 일치하는 문자열의 인덱스를 반환한다.
str.search(/o/); // -> 4
str.search(/x/); // -> -1

  3. String.prototype.includes

    • ES6에서 도입된 메서드로 인수로 전달받은 문자열이 포함되어 있는지 확인하여 true/false 로 반환한다.
    • 두 번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

  4. String.prototype.startsWith

    • 접두사가 일치하는지 확인한여 true.false 로 반환한다.
    • 두 번째 인수로 검색을 시작할 인덱스를 전달할 수 있다.

  5. String.prototype.endsWith

    • 접미가 일치하는지 확인한여 true.false 로 반환한다.
    • 두 번째 인수로 검색할 문자열의 길이를 전달할 수 있다.

  6. String.prototype.charAt

    • 인수로 전달받은 인덱스에 위치한 문자를 검색하여 반환한다.
    • 인덱스가 문자열의 범위를 벗어아면 빈 문자열을 반환한다.

  7. String.prototype.substring

    • 첫번째 인수(시작 인덱스) ~ 두번째 인수(끝 인덱스) 전 까지의 부분 문자열을 반환한다.

    • 두번째 인수를 생략하면 문자열의 끝까지로 인식한다.

    • 첫번째 인수가 두번째 인수보다 크면 교환된다.

    • 0보다 작거나 NaN인 경우 0으로 취급한다.

      const str = 'Hello World';

// 인덱스 1부터 마지막 문자까지 부분 문자열을 반환한다.
str.substring(1); // -> 'ello World'
str.substring(4, 1); // -> 'ell'
str.substring(-2); // -> 'Hello World'
str.substring(1, 100); // -> 'ello World'
str.substring(20); // -> ''

  8. String.prototype.slice

    • substring 메서드와 동일하게 동작한다.(단, slice는 음수인 인수를 전달할 수 있다.)
    • 인수가 음수라면 문자열의 가장 뒤부터 시작하여 문자열을 잘라내어 반환한다.

  9. String.prototype.toUpperCase

    • 대상 문자열을 모두 대문자로 변경하여 반환한다.

  10. String.prototype.toLowerCase

    • 대상 문자열을 모두 소문자로 변경하여 반환한다.

  11. String.prototype.trim

    • 문자열의 앞 뒤 공백을 제거하여 반환한다.

  12. String.prototype.repeat

    • ES6부터 도입되었으며 인수로 전달받은 정수만큼 반복해 연결한 새로운 문자열을 반환한다.
    • 인수가 0이면 빈 문자열을 반환한다.(인수 생략시 기본값은 0)
    • 음수면 RangeError를 발생시킨다.

  13. String.prototype.replace

    • 첫 번째 인수로 전달받은 문자열 또는 정규표현식을 검색하여 두 번째 인수로 전달한 문자열로 치환한 문자열을 반환한다.

    • 검색된 문자열이 여럿 존재할 경우 첫 번째로 검색된 문자열만 치환한다.

      const str = 'Hello world world';

str.replace('world', 'Lee'); // -> 'Hello Lee world'

  14. String.prototype.split

    • 첫 번째 인수로 전달한 문자열 또는 정규 표현식을 검색하여 문자열을 구분한 후 분리된 각 문자열로 이루어진 배열을 반환한다.

    • 인수로 빈 문자열을 전달하면 각 문자를 모두 분리한다.

    • 인수를 생략하면 문자열 전체를 단일 요소로하는 배열을 반환한다.

    • 두 번째 인수로 배열의 길이를 지정할 수 있다.

      const str = 'How are you doing?';

// 공백으로 구분(단어로 구분)하여 배열로 반환한다.
str.split(' '); // -> ["How", "are", "you", "doing?"]

// \s는 여러 가지 공백 문자(스페이스, 탭 등)를 의미한다. 즉, [\t\r\n\v\f]와 같은 의미다.
str.split(/\s/); // -> ["How", "are", "you", "doing?"]

// 인수로 빈 문자열을 전달하면 각 문자를 모두 분리한다.
str.split(''); // -> ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", "?"]

// 인수를 생략하면 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.
str.split(); // -> ["How are you doing?"]
profile
로건
Life Designer

0개의 댓글