반응형
문자열 길이
- 이모지와 특수문자는 4바이트로 인식하여 문자열의 결과가 2로 나타남
- 4바이트로 표현되는 문자를 하나의 문자로 인식하기 위해서 Array.from().length 이용
메서드 | 설명 | 결과 |
문자열.length | 문자열의 길이 | 정수 |
Array.from(문자열).length | 문자열의 길이 | 정수 |
'😋'.length
Array.from('😀').length // ⇒ 1
문자열 길이형식
- 문자열이 지정한 길이가 될 때까지 작업을 반복
- 지정한 길이가 실제 문자열 길이보다 짧은 경우 변한없이 기존 문자 반환
- 추가문자열 생략하면 공백으로 입력
메서드 | 설명 | 결과 |
문자열.padStart(전체길이, [추가문자열]) | 해당 문자열의 시작부터 전체길이가 될때까지 추가 문자열을 반복 | 문자 |
문자열.padEnd(전체길이, [추가문자열]) | 해당 문자열의 끝부터 전체길이가 될때까지 추가 문자열을 반복 | 문자 |
'G'.padStart(2, 'a'); // ⇒ aG
'22'.padEnd(5, '0'); // ⇒ 22000
'ggg'.padStart(2, 'f'); // ⇒ ggg
'111'.padStart(5); // ⇒ 111 (공백으로 채워짐)
문자열 공백 처리
메서드 | 설명 |
문자열.trim() | 문자열의 양끝의 공백(스페이스,탭,줄바꿈) 제거 , 문자열 사이의 공백은 제거 되지 않음 |
const txt = ' hi '
const res = txt.trim() // hi
const txt2 = ' hi\n'
const res2 = txt2.trim() // hi
const txt3 = ' hi jason'
const res3 = txt3.trim() // hi jason
문자열 위치 검색
- 공백 위치 포함
- 대소문자 구분
- 문자열이 존재하지 않을 경우 -1 반환
메서드 | 설명 | 결과 |
문자열.indexOf(검색대상문자열, [검색시작인덱스]) | 문자열 시작인덱스 | 숫자 |
문자열.lastIndexOf(검색대상문자열, [검색시작인덱스]) | 문자열 종료 인덱스 | 숫자 |
문자열.search(정규표현) | 정규표현 일치 인덱스 | 숫자 |
const txt = 'Javascript learn'
const res1 = txt.indexOf('Javascript')
console.log(res1); // ⇒ 0
const res2 = txt.indexOf('learn')
console.log(res2); // ⇒ 11
const res3 = txt.lastIndexOf('a')
console.log(res3);// ⇒ 13
const res4 = txt.indexOf('hi')
console.log(res4);// ⇒ -1
const res5 = txt.indexOf('j')
console.log(res5);// ⇒ -1
const res6 = txt.indexOf('java', 12)
console.log(res6); // ⇒ -1
// 정규 표현 사용
const res7 = txt.search(/Javascript/)
console.log(res7); // ⇒ 0
문자열 검색
메서드 | 설명 | 결과 |
문자열.includes(검색대상문자열, [검색시작인덱스]) | 문자열 포함 여부 | boolean |
문자열.startsWith(검색대상문자열, [검색시작인덱스]) | 문자열 시작문자 확인 | boolean |
문자열.endsWith(검색대상문자열, [검색시작인덱스]) | 문자열 종료문자 확인 | boolean |
const txt = 'Javascript learn'
const res1 = txt.includes('learn') // ⇒ true
const res2 = txt.startsWith('learn') // ⇒ false
const res3 = txt.endsWith('n') // ⇒ true
문자열 추출
- 기존 데이터 유지
메서드 | 설명 | 결과 |
문자열.charAt() | 인덱스 지정하지 않은 경우 인덱스 0의 문자를 반환 | 문자 |
문자열.charAt([인덱스]) | 해당 인덱스의 문자열 반환 | 문자 |
문자열.slice(시작인덱스, [종료인덱스]) | 시작인덱스 ~ 종료인덱스-1 문자 반환 - 음수 사용하면 뒤에서 문자열 추출 가능 - 시작인덱스가 종료 인덱스보다 클 경우 공백반환 |
문자 |
문자열.substring(시작인덱스, [종료인덱스]) | 시작인덱스 ~ 종료인덱스-1 문자 반환 - 음수 사용 불가 - 시작인덱스가 종료인덱스보다 클 경우 두 인텍스를 바꿔서 반환 |
문자 |
문자열.substr(시작인덱스, [글자수]) | 시작인덱스부터 지정한 문자수 만큼 반환 | 문자 |
let txt = 'Javascript',
txt2 = '안녕하세요'
txt.charAt(3); // ⇒ a
txt.charAt(); // ⇒ J
txt.slice(0, 3); // ⇒ Jav
txt.slice(-2); // ⇒ pt
txt.substring(0, 3); // ⇒ Jav
txt2.slice(3, 1) // ⇒ 공백
txt2.substring(3, 1) // ⇒ 녕하
txt2.substr(1,3) // ⇒ 녕하세
문자열 변환
- 기존 데이터 유지
메서드 | 설명 | 결과 |
문자열.replace(문자열1, 문자열2) | 문자열 1일 문자열2로 변환 - 처음으로 발견된 문자열만 변경가능 |
문자 |
문자열.replace(정규표현, 문자열) | 정규 표현으로 문자열 변경 - 정규 표현식을 활용하여 대체할 문자를 일괄변경 가능 |
문자 |
let txt = 'Javascript\tlearn',
num = '123-234-55';
let res = txt.replace('J', 'j'); // ⇒ javascript learn
let res2 = txt.replace('\t', ''); // ⇒ Javascriptlearn
let res3 = num.replace('-', ''); // ⇒ 123234-55
let res4 = num.replace(/-/g, ''); // ⇒ 12323455
문자열 나누기
- 기존 데이터 유지
- 인수에 공백 설정 시 한글자로 쪼개어 배열로 반환
- 인수 생략 시 첫번째 배열에 모든 문자 반환
메서드 | 설명 | 결과 |
문자열.split([기준문자],[최대분할수]) | 문자1을 문자2로 변경 |
문자 |
문자열.split([정규표현],[최대분할수]) | 정규 표현으로 문자열 변경 - 정규 표현식을 활용하여 대체할 문자를 일괄변경 가능 |
문자 |
let url = 'http://www.naver.com', txt = 'hello'
let res1 = url.split('/') // ⇒ [ 'http:', '', 'www.naver.com' ]
let res2 = url.split() // ⇒ [ 'http://www.naver.com' ]
let res3 = txt.split('') // ⇒ [ 'h', 'e', 'l', 'l', 'o' ]
문자열 결합
메서드 | 설명 | 결과 |
문자열1 + 문자열2 ... | 문자 결할 |
문자 |
`${문자열1}${문자열2}..` | 문자 결합 | 문자 |
문자열 변환
- 기존 데이터 유지
메서드 | 설명 | 결과 |
문자열.toLowerCase() | 소문자로 변환 |
문자 |
문자열.toUpperCase() | 대문자로 변환 | 문자 |
문자열 URI encode/decode 처리
인코딩
- URI에 한글이 포함되면 그대로 사용할 수 없기 때문에 인코딩이 필요
- encodeURIComponent가 이스케이프를 처리하는 문자열의 종류가 좀 더 많음
- 숫자, -, _, , !, ~, *, ', (,) 등은 이스케이프 처리되어 인코딩 되지 않음
디코딩
- 인코딩 된 문자 복원
메서드 | 설명 | 결과 |
encode.URI(문자열) | 문자열 인코딩 | 문자 |
encodeURIComponent(문자열) | 문자열 인코딩 | 문자 |
decodeURI(문자열) | 문자열 디코딩 | 문자 |
decodeURIComponent(문자열) | 문자열 디코딩 | 문자 |
encodeURI('http://www.naver.com/테스트.com'); // ⇒ http://www.naver.com/%ED%85%8C%EC%8A%A4%ED%8A%B8.com
encodeURIComponent('http://www.naver.com/테스트.com'); // ⇒ http%3A%2F%2Fwww.naver.com%2F%ED%85%8C%EC%8A%A4%ED%8A%B8.com
decodeURI('http://www.naver.com/%ED%85%8C%EC%8A%A4%ED%8A%B8.com'); // ⇒ http://www.naver.com/테스트.com
decodeURIComponent('http%3A%2F%2Fwww.naver.com%2F%ED%85%8C%EC%8A%A4%ED%8A%B8.com') // ⇒ http://www.naver.com/테스트.com
정규 표현식 사용
- 조건과 일치하는 문자 검색이나 많은 문자열을 패턴에 따라 일괄 변경하고자 할 때 유용
- 문자열 패턴 내용 앞과 뒤에 /를 붙여 사용
메서드 | 설명 | 결과 |
/패턴/.test(문자열) | 문자열과 패턴의 일치여부 확인 |
Boolean |
// 문자 포함 여부 검색
/J/.test('Javaascript'); // ⇒ true
// 시작 문자 지정 검색
/^iP/.test('iPhone'); // ⇒ true
// 숫자 포함 여부 검색
/\d/.test('text'); // ⇒false
//jav다음의문자 a가 0회 이상 존재하는지 여부
/Java.*/.test('Javascript'); // ⇒ true
// 문자 혹은 '문'과 '자' 사이에 문자 존재 여부
/문.*자/.test('문자열');// ⇒ true
// 숫자 형식 여부
/\d+-\d+-\d/.test('010-1111-2222'); // ⇒ true
//---------------------------------------------------------------------------------
// 정규 표현식 사용
if (/iPhone|iPad/.test(navigator.userAgent)) {
console.log('iOS');
}
// 정규 표현식을 사용하지 않을 경우
if(navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad')){
console.log('iOS');
}
반응형
'JS > Javascript' 카테고리의 다른 글
[Javascript] 데이터와 자료형(데이터 타입) (0) | 2024.01.24 |
---|---|
[Javascript] 배열 (0) | 2024.01.20 |
[Javascript] 숫자 관련 메서드 (0) | 2024.01.16 |
[Javascript] 클래스 (0) | 2023.11.07 |
[Javascript] 구문 오류 및 예외 처리 (0) | 2023.11.07 |