[Javascript] 문자 관련 메서드

문자열 길이

• 이모지와 특수문자는 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');

}

---