hoon's bLog

Javascript 객체 Object 전역객체(global object), 래퍼객체(wrapper object), 객체 메서드 본문

IT/Javascript

Javascript 객체 Object 전역객체(global object), 래퍼객체(wrapper object), 객체 메서드

개발한기발자 2023. 6. 12. 11:44
반응형


객체의 전반적인 기본 개념 : 객체(1) ← ← 포스팅을 참고해 주세요!!

객체의 다양한 사용 / 메서드 : 객체(2) ← ← 포스팅을 참고해 주세요!!

전역 객체와 래퍼 객체

전역 객체(global object)

  • 자바스크립트에 미리 정의된 객체로 전역 프로퍼티나 전역 함수를 담는 공간의 역할
  • 전역 객체 그 자체는 전역 범위(global scope)에서 this 연산자를 통해 접근
  • 자바스크립트에서 모든 객체는 전역 객체의 프로퍼티
  • 웹 브라우저가 새로운 페이지를 로드(load)하면, 자바스크립트는 새로운 전역 개체를 만들고 해당 프로퍼티들을 초기화
let str = "문자열";   // 문자열 생성
let len = str.length; // 문자열 프로퍼티인 length 사용
  • 위의 에서 생성한 문자열 리터럴 str은 객체가 아닌데도 length 프로퍼티를 사용 가능
  • 프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환!
  • 이렇게 생성된 임시 객체는 String 객체의 메서드를 상속받아 프로퍼티를 참조하는 데 사용
  • 이후 프로퍼티 참조가 끝나면 사용된 임시 객체는 자동으로 삭제

래퍼 객체(wrapper object)
숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체

let str = "문자열";             // 문자열 리터럴 생성
let strObj = new String(str); // 문자열 객체 생성

str.length;                   // 리터럴 값은 내부적으로 래퍼 객체를 생성한 후에 length 프로퍼티를 참조함.
str == strObj;                // 동등 연산자는 리터럴 값과 해당 래퍼 객체를 동일하게 봄.
str === strObj;               // 일치 연산자는 리터럴 값과 해당 래퍼 객체를 구별함.
typeof str;                   // string 타입
typeof strObj;                // object 타입

표준 객체(Standard Object)

Number 객체

  • 자바스크립트에서의 수 표현 : 자바스크립트에서는 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현
  • 64비트 부동 소수점 수는 메모리에 다음과 같은 형태로 저장
    • 0 ~ 51 비트  : 총 52비트의 가수 부분
    • 52 ~ 62 비트 : 총 11비트의 지수 부분
    • 63 비트 : 총 1비트의 부호 부분
    • 이러한 64비트 부동 소수점 수의 정밀도는 정수부는 15자리까지, 소수부는 17자리까지만 유효
let x = 999999999999999;  // 15자리의 정수부
let y = 9999999999999999; // 16자리의 정수부
let z = 0.1 + 0.2

x; // 999999999999999
y; // 10000000000000000
z; // 0.30000000000000004

z = (0.210 + 0.110) / 10; // 0.3
  • 이렇게 부동 소수점 수를 가지고 수행하는 산술 연산의 결괏값은 언제나 오차가 발생할 수 있음.
  • 자바스크립트에서는 이러한 오차를 없애기 위해, 마지막 w처럼 정수의 형태로 먼저 변환하여 계산을 수행하고, 다시 실수의 형태로 재변환 가능

진법 표현

  • 기본적으로 10진법을 사용하여 수를 표현
  • 0x 접두사를 사용하여 16진법으로 수를 표현 가능
let x = 0xAB; // 16진법으로 표현된 10진수 171
let y = 29;   // 10진법으로 표현된 10진수 29
x + y;        // 두 수 모두 10진법으로 자동으로 변환되어 계산됨. -> 200
  • 위의 예제처럼 자바스크립트에서는 산술 연산 시 모든 수가 10진수로 자동 변환되어 계산
  • 또한, 숫자에 toString() 메서드를 사용하여 해당 숫자를 여러 진법의 형태로 변환 가능

toString() : 해당 숫자의 진법을 실제로 바꿔주는 것이 아닌, 전달된 진법으로 변환된 형태를 문자열로 반환해 주는 것

let num = 256;
num.toString(2);       //  2진법으로 변환 : 100000000
num.toString(8);       //  8진법으로 변환 : 400
num.toString(10);      // 10진법으로 변환 : 256
num.toString(16);      // 16진법으로 변환 : 100
// 2진수로 변환한 결괏값을 문자열로 반환
num.toString(2);       // 100000000
// 문자열을 숫자로 나눴기 때문에 자동으로 10진수로 변환되어 산술 연산된 결괏값
(num.toString(2) / 2); // 50000000

Infinity : 자바스크립트에서는 양의 무한대를 의미하는 Infinity 값과 음의 무한대를 의미하는 -Infinity 값을 사용 가능, 읽기 전용 값

let x = 10 / 0;         // 숫자를 0으로 나누면 Infinity를 반환
let y = Infinity1000 // Infinity에 어떠한 수를 산술 연산해도 Infinity를 반환
let z = 1 / Infinity    // Infinity의 역수는 0을 반환

x;                      // Infinity
y;                      // Infinity
z;                      // 0

NaN(Not A Number)

  • 숫자가 아니라는 의미로, 정의되지 않은 값이나 표현할 수 없는 값
  • 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값
  • 자바스크립트의 전역 함수 중 하나인 isNaN() 함수를 사용하면, 전달받은 값이 숫자인지 아닌지를 판단

null, undefined, NaN, Infinity에 대한 비교

  • null은 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미하는 값
  • undefined는 null과는 달리 하나의 타입이며, '타입'이 정해지지 않은 것을 의미하는 값이기도
  • NaN은 number 타입이며, '숫자가 아님'을 의미하는 숫자
  • Infinity는 number 타입이며, '무한대'를 의미하는 숫자
let x = 100 - "10";     // "10"은 자동으로 숫자로 변환되어 계산됨.
let y = 100 - "문자열"; // "문자열"은 숫자로 변환할 수 없기 때문에 NaN을 반환
let z = 0 / 0;          // 0을 0으로 나눌 수 없기 때문에 NaN을 반환

x;                      // 90
y;                      // NaN
z;                      // NaN

// let x = 100"문자열";

if(isNaN(x)) { // 전달된 값이 숫자인지 아닌지를 판단
    document.write("변수 x의 값은 숫자가 아닙니다.");
} else {
    document.write("변수 x의 값은 숫자");
}

문맥에 따른 타입 변환

Boolean Number String
null false 0 "null"
undefined false NaN "undefined"
NaN false NaN "NaN"
Infinity true Infinity "Infinity"
typeof null;        // object
typeof undefined;   // undefined
typeof NaN;         // number
typeof Infinity;    // number

Boolean(null);      // false
Boolean(undefined); // false
Boolean(NaN);       // false
Boolean(Infinity);  // true

Number(null);       // 0
Number(undefined);  // NaN
Number(NaN);        // NaN
Number(Infinity);   // Infinity

String(null);       // null
String(undefined);  // undefined
String(NaN);        // NaN
String(Infinity);   // Infinity

Number 객체

  • 자바스크립트에서 숫자는 보통 숫자 리터럴을 사용하여 표현
  • 하지만 수를 나타낼 때 new 연산자를 사용하여 명시적으로 Number 객체를 생성 가능
  • 이러한 Number 객체는 숫자 값을 감싸고 있는 래퍼(wrapper) 객체
let x = 100;             // 숫자 리터럴
let y = new Number(100); // Number 객체

x;                       // 100
y;                       // 100

typeof x;                // number 타입
typeof y;                // object 타입
  • 동등 연산자(==)는 리터럴 값과 객체의 값이 같으면 true를 반환
  • 하지만 일치 연산자(===)는 숫자 리터럴과 Number 객체의 타입이 다르므로, 언제나 false를 반환
let x = 100;             // 숫자 리터럴 100
let y = new Number(100); // Number 객체 100

x == y;                  // 값이 같으므로 true
x === y;                 // 서로 다른 객체이므로 false
  • new 연산자를 사용하여 객체를 생성할 때에는 매우 많은 추가 연산을 해야함
  • 따라서 가능한 숫자 리터럴을 사용하여 수를 표현하고, Number 객체는 래퍼 객체로만 활용

Number 메서드

Number 객체에 정의되어 있는 숫자와 관련된 작업을 할 때 사용하는 메서드


Number.parseFloat()

  • 문자열을 파싱(parsing)하여, 문자열에 포함된 숫자 부분을 실수 형태로 반환
  • 문자열에 여러 개의 숫자가 존재하면, 그중에서 첫 번째 숫자만을 실수 형태로 반환
Number.parseFloat("12");         // 12
Number.parseFloat("12.34");      // 12.34
Number.parseFloat("12문자열");   // 12
Number.parseFloat("12 34 56");   // 12
Number.parseFloat("문자열 56"); // NaN

Number.parseInt()

  • 문자열을 파싱하여, 문자열에 포함된 숫자 부분을 정수 형태로 반환
  • 문자열에 여러 개의 숫자가 존재하면, 그중에서 첫 번째 숫자만을 정수 형태로 반환
Number.parseInt("12");         // 12
Number.parseInt("12.34");      // 12
Number.parseInt("12문자열");   // 12
Number.parseInt("12 34 56");   // 12
Number.parseInt("문자열 56"); // NaN

Number.isNaN()

  • 전달된 값이 NaN인지 아닌지를 검사
  • 전역 함수인 isNaN() 함수가 가지고 있던 숫자로의 강제 변환에 따라 발생하는 문제 예방
  • 오직 숫자인 값에서만 동작하며, 그 값이 NaN인 경우에만 true를 반환
Number.isNaN(NaN);       // true
Number.isNaN(0 / 0);     // true
// 다음은 전역 함수인 isNaN()에서 잘못된 결과를 반환하는 임.

isNaN("NaN");            // true
isNaN(undefined);        // true
isNaN("문자열");         // true
// Number.isNaN() 메서드에서 맞는 결과를 반환하고 있음.

Number.isNaN("NaN");     // false
Number.isNaN(undefined); // false
Number.isNaN("문자열");  // false

Number.isFinite()

  • 전달된 값이 유한한 수인지 아닌지를 검사
  • 전역 함수인 isFinite() 함수처럼 전달된 값을 숫자로 강제 변환 안함
  • 오직 셀 수 있는 값에서만 동작하며, 그 값이 유한한 경우에만 true를 반환
Number.isFinite(0);        // true
Number.isFinite(3e45);     // true
Number.isFinite(Infinity); // false
Number.isFinite(NaN);      // false
// 다음은 전역 함수인 isFinite()에서 잘못된 결과를 반환하는 임.

isFinite("0");             // true
isFinite(null);            // true
// Number.isFinite() 메서드에서는 맞는 결과를 반환하고 있음.

Number.isFinite("0");      // false
Number.isFinite(null);     // false

Number.isInteger()

  • 전달된 값이 정수인지 아닌지를 검사
  • 전달된 값이 정수이면 true를 반환하며, 정수가 아니거나 NaN, Infinity와 같은 값은 모두 false를 반환
Number.isInteger(0);        // true
Number.isInteger(-100);     // true
Number.isInteger(0.1);      // false
Number.isInteger("문자열"); // false
Number.isInteger(Infinity); // false
Number.isInteger(true);     // false

toString()

  • Number 인스턴스의 값을 문자열로 반환
  • 전달받은 값에 해당하는 진법으로 우선 값을 변환한 후, 그 값을 문자열로 반환도 가능
numObj.toString([진법])
  • 숫자 리터럴에 toString() 메서드를 사용할 때에는 반드시 괄호(())를 사용하여 숫자 리터럴을 감싸야 함.
  • 그렇지 않으면 자바스크립트는 SyntaxError를 발생한 후, 프로그램을 중지
let num = 255;       // Number 인스턴스를 생성함.
num.toString();      // 255
(255).toString();    // 255
(3.14).toString();   // 3.14
num.toString(2);     // 11111111
(100).toString(16);  // 64
(-0xff).toString(2); // -11111111

valueOf()

  • Number 인스턴스가 가지고 있는 값을 반환
numObj.valueOf()
let numObj = new Number(123); // 123의 값을 가지는 Number 인스턴스를 생성함.
typeof numObj;                // object
let num = numObj.valueOf();
num;                          // 123
typeof num;                   // number

Math 객체

  • 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체
  • Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재 X
  • 따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메서드나 프로퍼티를 바로 사용 가능

Math 메서드

자주 쓰이는 메서드
Math.min(x, y, ...) : 인수로 전달받은 값 중에서 가장 작은 수를 반환
Math.max(x, y, ...) : 인수로 전달받은 값 중에서 가장 큰 수를 반환
Math.random() : 0보다 크거나 같고 1보다 작은 랜덤 숫자(random number)를 반환
Math.round(x) : x를 소수점 첫 번째 자리에서 반올림하여 그 결과를 반환
Math.floor(x) : x와 같거나 작은 수 중에서 가장 큰 정수를 반환
Math.ceil(x) : x와 같거나 큰 수 중에서 가장 작은 정수를 반환
Math.abs(x) : x의 절댓값을 반환
Math.cbrt(x) : x의 세제곱근을 반환
Math.sqrt(x) : x의 제곱근을 반환
Math.clz32(x) : x을 32비트 이진수로 변환한 후, 0이 아닌 비트의 개수를 반환
Math.pow(x, y) : x의 y승을 반환
Math.trunc(x) : x의 모든 소수 부분을 삭제하고 정수 부분만을 반환

Date 객체

  • 자바스크립트에서는 Date 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 손쉽게 제공
  • Date 객체는 연월일, 시분초의 정보와 함께 밀리초(millisecond)의 정보도 함께 제공
  • 자바스크립트에서 월(month)을 나타낼 때는 1월이 0으로 표현되고, 12월이 11로 표현된다는 사실에 유의!!

Date 객체 초기화

  • new Date() : Date 객체를 생성할 때 어떠한 인수도 전달하지 않으면, 현재 날짜와 시간을 가지고 Date 객체를 생성
  • new Date("날짜를 나타내는 문자열")
  • new Date(밀리초)
  • new Date(년, 월, 일, 시, 분, 초, 밀리초)
  • Date 객체를 생성할 때 인수가 전달되면, 그 형태에 따라 특정 날짜와 시간을 가리키는 Date 객체를 생성
  • 자바스크립트에서 날짜 계산의 모든 기준은 1970년 1월 1일 00:00:00(UTC, 협정세계시)부터!!
  • 또한, 하루는 86,400,000 밀리초(millisecond)로 계산
let date = new Date(); // Date 객체 생성
document.write(date);

new Date("December 14, 1977 13:30:00");                             // 날짜를 나타내는 문자열
new Date(80000000);                                                 // 1970년 1월 1일 0시부터 해당 밀리초만큼 지난 날짜
new Date(16, 5, 25);                                     // 3개의 숫자로 나타내는 날짜이며, 시간은 자동으로 0시 0분 0초로 설정됨.
new Date(16, 5, 25, 15, 40, 0);    // 7개의 숫자로 나타내는 날짜
new Date(2016, 5, 25, 15, 40, 0);  // 2000년대를 표기 할 때에는 연도를 전부 표기해야 함.


자바스크립트 날짜 양식(date format)
ISO 날짜 양식
ISO 8601은 날짜와 시간을 나타내는 국제 표준 양식
YYYY-MM-DDTHH:MM:SS // T는 UTC(협정세계시)를 나타내는 문자로 시간까지 표현할 때에는 반드시 사용해야 함.
YYYY-MM-DD
YYYY-MM
YYYY

new Date("1977-12-14T13:30:00"); // 날짜와 시간까지 표현함.
new Date("1977-12-14");          // 시간이 생략되면 자동으로 09:00:00으로 설정됨.
new Date("1977-12");             // 일이 생략되면 자동으로 1일로 설정됨.
new Date("1977");                // 월이 생략되면 자동으로 1월로 설정됨.


// Long 날짜 양식
MMM DD YYYY
DD MMM YYYY

new Date("Feb 19 1982");        // MMM DD YYYY
new Date("19 Feb 1982");        // DD MMM YYYY
new Date("February 19 1982");   // 월의 축약형 뿐만 아니라 전체 단어도 인식함.
new Date("FEBRUARY, 19, 1982"); // 쉼표는 제외되며, 대소문자의 구분은 없음.


// Short 날짜 양식
MM/DD/YYYY
YYYY/MM/DD

new Date("02/19/1982"); // MM/DD/YYYY
new Date("1982/02/19"); // YYYY/MM/DD
//ISO 날짜 양식과 short 날짜 양식에서는 반드시 월일 순서로 날짜가 나와야 하며, 일월 순서로 나온 날짜는 자바스크립트가 제대로 인식 불가


// Full 날짜 양식 : 사용하는 날짜 양식으로 표현된 문자열도 날짜로 인식

new Date("Wed May 25 2016 17:00:00 GMT+0900 (Seoul Time)");
// GMT가 현재 국가와 다른 시간은 현재 국가의 GMT로 변환되어 표현됨.

new Date("Wed May 25 2016 17:00:00 GMT-0500 (New York Time)");

Date.now() : 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초(millisecond) 단위의 정수로 반환

let nowMiliSec = Date.now();
nowMiliSec;           // 1970년 1월 1일 00:00:00부터 현재까지의 밀리초
new Date(nowMiliSec); // new Date()와 같은 결과를 반환
new Date();

Date.prototype getter

  • 모든 Date 인스턴스는 Date.prototype으로부터 메서드와 프로퍼티를 상속 받음
  • Date.prototype getter 메서드는 날짜와 관련된 정보를 받아오기 위한 메서드
// getFullYear() : 현재 연도를 4비트의 숫자(YYYY)로 반환
let date = new Date();
document.write("올해는 " + date.getFullYear() + "년"); // 현재 연도를 반환

// getDate() : 현재 날짜에 해당하는 숫자를 반환
let date = new Date();
document.write("오늘은 " + date.getMonth() + "월 " + date.getDate() + "일"); // 현재 날짜를 반환

// getDay() : 현재 요일에 해당하는 숫자를 반환, 자바스크립트에서 일요일(0) ~ 토요일(6)
let date = new Date();
let day;

switch (date.getDay()) { // 현재 요일을 반환
    case 0:
        day = "일";
        break;

    case 1:
        day = "월";
        break;
    // ...
    case 6:
        day = "토";
        break;
}

document.write("오늘은 " + day + "요일");

// 배열을 사용하면 더욱 간단하게 요일을 출력 가능
let date = new Date();
let days = ["일", "월", "화", "수", "목", "금", "토"];

document.write("오늘은 " + days[date.getDay()] + "요일");

// getTime() : 1970년 1월 1일 0시 0분 0초부터 현재까지의 시간을 밀리초 단위로 환산한 값을 숫자로 반환
let date = new Date();
let period = date.getTime() / 86400000 // 하루는 86,400,000 밀리초로 계산됨.

document.write("1970년 1월 1일부터 오늘까지 " + period.toFixed() + "일이 지났습니다."); // 소수 부분은 생략함.

Date.prototype setter 메서드 : 날짜와 관련된 정보를 설정하기 위한 메서드

// setFullYear() : Date 객체의 값을 특정 날짜로 설정
// setDate() : Date 객체의 일자 값을 특정 일자로 설정

let date = new Date();
date.setFullYear(1982, 1, 19); // 자바스크립트에서 2월은 1임.
date.getFullYear();            // 1982
date.getMonth();               // 1
date.getDate();                // 19

let date = new Date();
date.setDate(10);              // Date 객체의 일자 값을 10일로 설정함.

document.write(date + "<br>");

date.setDate(40);              // 40일을 설정하면, 초과되는 일수만큼 다음달로 넘어감.
document.write(date);

setDate() : 현지 시각으로 특정 일자를 설정함. / 1 ~ 31
setMonth() : 현지 시각으로 특정 월을 설정함. / 0 ~ 11
setFullYear() : 현지 시각으로 특정 연도를 설정함. (연도뿐만 아니라 월과 일자도 설정할 수 있음) / YYYY, MM, DD
자바스크립트에서 setDay() : 존재 X
setHours() : 현지 시각으로 특정 시간을 설정함. / 0 ~ 23
setMilliseconds() : 현지 시각으로 특정 밀리초를 설정함. / 0 ~ 999
setMinutes() : 현지 시각으로 특정 분을 설정함. / 0 ~ 59
setSeconds() : 현지 시각으로 특정 초를 설정함. / 0 ~ 59
setTime() : 1970년 1월 1일 0시 0분 0초부터 밀리초 단위로 표현되는 특정 시간을 설정함.

String 객체

  • 문자열 리터럴은 큰따옴표("")나 작은따옴표('')를 사용하여 손쉽게 만들 수 있습니다.
  • 문자열의 길이 : length 프로퍼티에 저장
  • 오랫동안 사용되어 온 아스키(ASCII) 인코딩 환경에서 영문자는 한 글자당 1바이트, 한글은 한 글자당 2바이트로 표현
  • 하지만 UTF-8 인코딩 환경에서는 영문자는 한 글자당 1바이트, 한글은 한 문자당 3바이트로 표현
  • 자바스크립트의 length 프로퍼티는 해당 문자열의 총 바이트 수를 저장하는 것이 아닌 글자의 개수만을 저장
let firstStr = "이것도 문자열";      // 큰따옴표를 사용한 문자열
let secondStr = '이것도 문자열';     // 작은따옴표를 사용한 문자열
let thirdStr = "나의 이름은 '홍길동'이야."  // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
let fourthStr = '나의 이름은 "홍길동"이야.' // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.

let strKor = "한글";
let strEng = "abcABC";
strKor.length; // 2
strEng.length; // 6

문자열에서의 위치 찾기

  • indexOf() : String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환
  • lastIndexOf() : String 인스턴스에서 특정 문자나 문자열이 마지막으로 등장하는 위치의 인덱스를 반환
  • 이 메서드들은 문자열을 찾기 시작할 String 인스턴스의 위치를 두 번째 인수로 전달 가능
  • 만약 전달받은 특정 문자나 문자열을 찾을 수 없을 때는 -1을 반환
let str = "abcDEFabc";

str.indexOf('abc');     // 0  -> 자바스크립트에서 인덱스는 0부터 시작함.
str.indexOf('abcd');    // -1 -> 문자열을 비교할 때 문자의 대소문자를 구분함.
str.indexOf('abc', 3);  // 6  -> 인덱스 3부터 'abc'를 찾기 시작함.
str.lastIndexOf('abc'); // 6
str.lastIndexOf('d');   // -1
str.lastIndexOf('c');   // 8

문자열에서 지정된 위치에 있는 문자 반환

  • charAt() : String 인스턴스에서 전달받은 인덱스에 위치한 문자를 반환
  • charCodeAt() : String 인스턴스에서 전달받은 인덱스에 위치한 문자의 UTF-16 코드를 반환 (0 ~ 65535)
  • charPointAt() : String 인스턴스에서 전달받은 인덱스에 위치한 문자의 유니코드 코드 포인트(unicode code point)를 반환
let str = "abcDEFabc";

str.charAt(0);      // a
str.charAt(10);     // 빈 문자열 -> 전달받은 인덱스가 문자열의 길이보다 클 경우에는 빈 문자열을 반환
str.charCodeAt(0);  // 97        -> 'a'에 해당하는 UTF-16 코드를 반환
str.codePointAt(0); // 97        -> 'a'에 해당하는 유니코드 코드 포인트를 반환(사파리, 익스플로러에서 지원 X)

문자열 추출 / 분리 / 결합 / 변환

  • slice() : String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지 문자열을 추출한 새 문자열을 반환
  • substring() : String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지 문자열을 추출한 새 문자열을 반환
  • substr() : String 인스턴스에서 전달받은 시작 인덱스부터 길이만큼 문자열을 추출한 새로운 문자열을 반환
  • split() : String 인스턴스에서 구분자(separator)를 기준으로 나눈 후, 나뉜 문자열을 하나의 배열로 반환
  • concat() : String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환
  • toUpperCase() : String 인스턴스의 모든 문자를 대문자로 변환한 새로운 문자열을 반환
  • toLowerCase() : String 인스턴스의 모든 문자를 소문자로 변환한 새로운 문자열을 반환
  • trim() : String 인스턴스 문자열 값 그 자체에는 영향을 주지 않습니다.
var str = "abcDEFabc";
str.slice(2, 6);     // cDEF     -> 인덱스 2부터 인덱스 5까지 문자열을 추출함.
str.slice(-4, -2);   // Fa       -> 음수로 전달된 인덱스는 문자열의 뒤에서부터 시작함.
str.slice(2);        // abcDEFab -> 인수로 종료 인덱스가 전달되지 않으면 문자열의 마지막까지 추출함.

str.substring(2, 6); // cDEF
str.substr(2, 4);    // cDEF

str = "자바스크립트는 너무 멋져요! 그리고 유용해요.";
str.split();    // 구분자를 명시하지 않으면 아무런 동작도 하지 않음.
str.split("");  // 한 문자("")씩 나눔.
str.split(" "); // 띄어쓰기(" ")를 기준으로 나눔.
str.split("!"); // 느낌표("!")를 기준으로 나눔.


str = "자바스크립트";

str;                                                // 자바스크립트
str.concat("는 너무 멋져요!");                      // 자바스크립트는 너무 멋져요!
str.concat("는 너무 멋져요!", " 그리고 유용해요."); // 자바스크립트는 너무 멋져요! 그리고 유용해요!
str;                                                // 자바스크립트

// 위의 에서 여러 번 concat() 메서드를 실행한 후의 변수 str 문자열은 처음과 동일
// String 인스턴스의 값은 변경 불가
// 따라서 모든 String 메서드는 결괏값으로 새로운 문자열을 생성하여 반환

str = "JavaScript";

str.toUpperCase(); // JAVASCRIPT
str.toLowerCase(); // javascript

str = "      JavaScript    ";
str.trim();

정규 표현식을 이용한 문자열 조작

  • search() : 인수로 전달받은 정규 표현식에 맞는 문자나 문자열이 처음으로 등장하는 위치의 인덱스를 반환
  • replace() : 인수로 전달받은 패턴에 맞는 문자열을 대체 문자열로 변환한 새 문자열을 반환
  • match() : 인수로 전달받은 정규 표현식에 맞는 문자열을 찾아서 하나의 배열로 반환

기타 String 관련 메서드

  • includes() : 인수로 전달받은 문자나 문자열이 포함되어 있는지를 검사한 후 그 결과를 불리언 값으로 반환
  • startsWith() : 인수로 전달받은 문자나 문자열로 시작되는지를 검사한 후 그 결과를 불리언 값으로 반환
  • endsWith() : 인수로 전달받은 문자나 문자열로 끝나는지를 검사한 후 그 결과를 불리언 값으로 반환
  • normalize() : 해당 문자열의 유니코드 표준화 양식(Unicode Normalization Form)을 반환
  • repeat() : 해당 문자열을 인수로 전달받은 횟수만큼 반복하여 결합한 새로운 문자열을 반환
  • toString() : String 인스턴스의 값을 문자열로 반환
  • valueOf() : String 인스턴스의 값을 문자열로 반환

 

 

길고 길었떤 객체 정리 끝!

그만큼 자바스크립트에서 상당 지분을 가지고 있는 객체인만큼 알아볼게 많앗다.

 

객체의 전반적인 기본 개념을 보시려면 "객체(1)" ← ← 포스팅을 참고해 주세요!!

객체의 다양한 사용 / 메서드를 보시려면 "객체(2)" ← ← 포스팅을 참고해 주세요!!

 

끝!

Reference

https://www.tcpschool.com/javascript/js_standard_object

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

728x90
반응형