본문 바로가기

나의 FE피봇이야기/Javascript

[Javascript] 문자열 및 문자 추출

javascript 문자열


1. 텍스트를 저장하고 조작하기 위한 자료형

2. 따옴표 안에 쓰여진 0개 이상의 문자
ex.
let txt = "Hong Gildong";
let txt = 'Hong Gildong';


3. 문자열을 둘러싼 다옴표와 일치하지 않으면 문자열 내에서 따옴표 사용 가능

let txt1 = "lt's alright";
let txt2 = "He is called 'Robin Hood'";
let txt3 = 'He is called "Robin Hood"';

 

 

lenth: 문자열 길이

1. 문자열의 길이
- let txt = "ABCDEG"
- let length = txt.length;


escape 문자

1. 백슬러시(\) 사용
2. 특수 문자를 문자열 문자로 변환


Code 
\' : '  =>> Single quote
\" : " =>> Double quote
\\ : \ =>> Backslash

3. \" 시퀀스 : 문자열에 큰 따옴표 삽입
- let txt = "We are the so-called \"Vikings\" from the North.";

4. \' 시퀀스 : 문자열에 작은 따옴표 삽입
- let txt = 'lt\'s alright.';

5 \\시퀀스 : 문자열에 백스래시 삽입
- let txt = "We are the so-called '\\'.";

6. 기타 이스케이프 시퀀스 
Code Result
\b : Backspace
\f : from Freed(공백)
\n : New line
\r : Carriage Return (줄 종결)
\t : Horizontal Tabulator(공백)
\v : Vertical Tabulator(공백)
- 이 6개의 이스케이프 문자는 타자기, 테레타이프 및 팩스 기계를 제어하도록 설계
- HTML에서만 적용 안됨.(JavaScript 사용 가능)

 

 

긴 코드 줄 끊기

1. 가독성을 위한 긴 코드를 여러 행으로 분리
2. 중단하기에 가장 좋은 위치는 연산자 다음
- document.getElementById("exam").innerHTML = 
"Hello World!";

3. 단일 백스래시를 사용하여 텍스트 문자열 내의 코드 줄 분리
- document.getElementById("exam").innerHTML = "Hello \
World!";
1) 일부 브라우저는 문자 뒤에 공백 허용 안 함

4. 문자열 추가
- document.getElementById("exam").innerHTML = "Hello" + "World!";

5. 백슬래시로 코드 줄 분리
- document.getElementById("exam").innerHTML = \
"Hello world!";

 

 

문자열 부분 추출

1. slice(start[기계 순번], end[사람 순번])
- slice와 동일하게 '-'를 활용하여 뒤부터 slice가 가능하다.

2. substring(start, end)
- 0보다 작은 값들은 0으로 계산한다.

3. substr(start, length)
- slice와 동일하게 '-'를 활용하여 뒤부터 slice가 가능하다. (단, length는 양수이어야 한다.)


 

replcae

1. 지정된 값을 문자열의 다른 값으로 변경
2. replace() 메서드는 호출된 무자열을 반경하지 않고 '새 문자열' 반환
3. 첫 번째 일치 항목만 변경
4. 모든 일치 항목을 바꾸려면 /g 플래그가 설정된 정규식 사용
5. 대/소문자 구분
6. 대소문자 구분하지 않으려면 정규 표현식을 /i 플래그(구별하지 않음) 사용

*정규 표현식은 따옴표 없이 작성



전체 문자를 바꾸고 싶을때

A. replaceAll( )


1. 문자열 모두 바꾸기
2. 바꿀 문자열 대신 정규식 지정가능
3. 매개변수가 정규식이면 전역 플래그(g) 설정 필수


B. 정규식 사용(따움표 없음)

/(정규식)/g, "(대체할 문자)"
ex. txt.replace(/무궁화/g, "장미")

 

 

대/소 문자 변환

1. toUpperCase()
2. toLowerCase()

-let txt ="Hello World!";
-let txt = txt1.toUpperCase()
-let txt =txt2.toLowerCase()

 

 

concat( )

1. 두 개 이상의 문자열을 결합
- let txt1 = "Hello";
- let txt2 = "World";
- let txt3 = txt1.concat(" ", txt2);

2. 더하기 연산자 대신 사용 가능
- txt = "Hello" + " " + "World!";
- txt = "Hello".concat(" ", "World!");

3. 모든 문자열 메서드는 원래 문자열을 수정하지 않고 새 문자열을 반환
4. 문자열은 변경할 수 없으며 교체만 가능

 

 

공백 제거

1. trim ( ) : 문자열 양쪽의 공백 제거
2. trimStart( ) : 문자열 시작 부분 공백 제거
3. trimEnd( ) : 문자열 끝 부분 공백 제거

 

 

문자열 채우기

padStart( 총 길이, "(비여있는 공간에 채울 값)")


1. padStart ( ) : 주어진 길이에 도달할 때까지 문자열의 처음부터 다른 문자열 작성
- 길이가 4가 될때까지 문자열을 "0"으로 채우기
- let txt = "5";
- let padded = txt.padStart(4,"0"); => 
- padStart ( )는 '문자열 메서드'이므로 숫자를 채우려면 숫자를 문자여롤 변환

2. padEnd( ) : 주어진 길이에 도달할 때까지 문자열의 끝에서 다른 문자열 작성

 

 

 

문자 추출

1.charAt(index position)
-문자열의 지정된 인덱스(위치)에 있는 문자 변환

2. charCodeAt(indx Position)
-문자열의 지정된 인덱스에 있는 문자의 유니코드 반환

3. [  ]속성 액세스 =>> 추출
- 문자열을 배열처럼 표시(배열x)
- let txt = "HELLO WORLD";
- let char = txt[0];

4. 문자 없는 경우
- charAt( ) : 빈 문자열 반환
- [ ] : undefined 반환

5. 문자열을 배열로 변환하여 사용 가능 

 

문자열 위치 반환

1. indexOf("searchValue", [(생략가능)fromIndex]
- 첫 번째 나타나는 문자열의 인덱스 반환
- 텍스트를 찾을 수 없으면 -1 반환

2. lastIndexOf
- 문자열으리 끝부분부터 검색하여 인덱스 반환
- 텍스트를 찾을 수 없으면 -1을 반환

3. search("문자열")
- 문자열(or 정규식)에 대한 문자열을 검색하고 일치하는 위치를 반환

4. indexOf( )와 search( )
- indexOf( ) : 정규식(강력한 검색 값) 사용 불가
- search( ) : 두 번째 인수(시작 위치) 사용 불가

 

 

문자열 분리

1. split("구분자") : 문자열을 분리하여 배열로 변환
2. 구분자가 생략되면 반환된 배열은 인덱스[0]에 전체 문자열 포함
3. 구분 기호가 " " 이면 글자 단위로 분리하여 배열로 반환

'나의 FE피봇이야기 > Javascript' 카테고리의 다른 글

[nodelist]for문을 통해서 childern 값 변경하기  (2) 2023.11.21
JavaScript 오류  (0) 2023.11.15
[splice]  (0) 2023.11.13
객체  (0) 2023.11.13
[addEventListner]  (0) 2023.11.10