일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- Memoir
- Linux
- 고잉버스
- 백준 javascript
- 반복문
- JavaScript
- 개발자 회고록
- Java
- 코테
- 월간코드챌린지
- 리눅스마스터 3과목
- 자바
- 스프링 컨테이너
- Kotlin
- 연습문제
- 프로그래머스
- 리눅스마스터 1급 정리
- 자바스크립트 코딩의 기술
- 백준 java
- 리눅스마스터1급
- 스프링 빈
- java 백준 1차원 배열
- 코딩테스트
- 리눅스
- map
- GoingBus
- 명령어
- toCharArray
- 문자열
- 카카오
- Today
- Total
hoon's bLog
Javascript 객체 Object 전역객체(global object), 래퍼객체(wrapper object), 객체 메서드 본문
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
'IT > Javascript' 카테고리의 다른 글
Javascript 문서 객체 모델 DOM 객체 (0) | 2023.06.15 |
---|---|
Javascript Array 객체 Object (0) | 2023.06.14 |
Javascript 객체 Object 상속, 프로토타입 prototype, 순회 (1) | 2023.04.29 |
Javascript 객체 Object 참조 및 생성 (0) | 2023.04.28 |
Javascript 함수 function 정의 및 종류 (0) | 2023.04.21 |