자바스크립트, 문자열 메서드(공백제거,스타일치환,꺼내기,치환하기,배열화하기,검색하기)

string.trim(): string
문자열의 양쪽 공백 제거.

 

문자열 양쪽 끝의 공백을 제거한 새로운 문자열을 반환. 여기서 공백은 space, tab, NBSP, 개행문자(\n).

• string.trimStart(): string
• string.trimEnd(): string

양쪽 끝의 공백제거를 주로 쓰지만, 앞과 뒤를 따로 사용할 수도 있다.

const str1 = '   Removes Whitespace   from\n';
const str2 = 'both ends of a String';

console.log(str1);
console.log(str1.trim());
console.log(str1.trim() + str2);

 

영어 대소문자의 변환
string.toLowerCase(): string
string.toUpperCase(): string
string.repeat( count: number ): string

 

CSS 를 공부했을때 알게된 스타일링이 메서드에도 존재한다는것을 알 수 있다.

마찬가지로 repeat 도 반복의 의미로 grid를 할때 알게되었는데, 이와 같은 문자열 메서드도 있다는 것을 알 수 있다.

 

- 모든 문자열을 소문자로 변환한 새로운 문자열 반환.

- 모든 문자열을 대문자로 변환한 새로운 문자열 반환.

- 해당 문자열을 count만큼 재생한 새로운 문자열 반환.

const str1 = '   Removes Whitespace   from\n';

 console.log(str1.toLowerCase());
 console.log(str1.toUpperCase());
 console.log(str1.repeat(3));

 

문자열을 원하는 부분만 잘라보자.
string.substring( startIndex: number, endIndex?: number ): string
문자열.substring( 어디서, 어디까지 )
string.slice( startIndex: number, endIndex?: number ): string
문자열.slice(어디서 , 어디까지)

 

substring 이 구버젼 같은 느낌이라면 slice가 신버젼같은 느낌을 받았다.

역할은 같지만 , slice는 뒤에서 부터도 음수값을 통해 인덱싱 할 수 있기 떄문이다.

substring 은 시작이 큰숫자 , 끝이 작은 숫자일 경우 자동으로 치환되어 나오는 특징이 있고,

slice 는 시작이 큰숫자, 끝이 작은 숫자일 경우 빈문자열을 반환하게 되는 큰 차이를 보인다.

 

 console.log(str2.substring(5));
 console.log(str2.substring(5, 8));          
 console.log(str2.substring(8, 5));   //시작인덱스가 종료인덱스 보다 큰 경우이므로 내부적으로
 console.log();                       //다시 start가 5가 되고 end가 8이 되도록 서로 치환.

 console.log(str2.slice(5, 8));       
 console.log(str2.slice(8, 5));      //시작인덱스가 종료인덱스 보다 큰 경우 빈 문자열 반환.
 console.log(str2.slice(-6));           //뒤에서 부터 카운팅이 이루어짐.
 console.log();

 

 

문자를 바꿔볼까 ?
String.replace(searchValue: string | RegExp, replaceValue: string): string
문자열.replace('문자', '문자')

 

찾고자하는 최조 문자열을 검색하여 내가 원하는 문자열로 치환하여 새로운 문자열을 반환한다.

반환한다고 해서 원본이 바뀌는것이 아니기 때문에 필요시에는 값을 저장해야 할 수도 있다.

제일 큰 특징은 , 최초 검색부분만 변경됨 , 검색하고 없을 경우 원본을 반환하는 특징을 알아두자.

 

 const str3 = 'replaces the matched substring with a replacement substring.';

 console.log(str3.replace('sub', 'main'));   //최초검색부분만 변경.
 console.log(str3);
 console.log(str3.replace('middle', 'center')); // 검색후 없을경우 그냥 원본을 반환.
 console.log();

 

문자를 내가 원하는대로 배열화 해보자.
String.split(separator: string | RegExp, limit?: number): string[]
문자열.split(기준 , 몇번째까지나올거야)
문자열.split(기준 , [그인덱스만])
기준 : '' -> 단어하나하나 / ' '-> 공백기

 const str4 = 'Uses a regular expression'; //현재 모양이 공백을 기준을 쪼개져있음.

 console.log(str4.split());       // 인수를 모두 생략하면 전체 문자열이 하나의 배열 요소로 반환.
                                       //디폴트 값이 요소 하나로 추출.
 console.log(str4.split(''));     // 구분자를 빈 문자열로 지정하면 대상 문자열의 모든 문자들을 배열 요소들로 반환.
                                       //문자 사이사이를 전부 문자열로 반환.
 console.log(str4.split('', 4));  // 제한자 인수를 두어 반환 배열 요소들을 제한.
                                  //쪼개는 수를 제한하겠다는 의미. 하나씩 4개만 보여짐. 뒤에것은 데이터 손실.

 console.log(str4.split(' '));        //공백을 기준으로 문자열로 쪼개짐.
 console.log(str4.split(' ', 2));
 console.log(str4.split(' ')[2]); // 구분자를 통해 반환받은 배열을 통한 인덱싱.

 

 

---

문자열이 이걸로 시작하니 ? 맞니 아니니?
문자열이 이걸로 끝나니 ? 맞니 아니니 ?
문자열이 이걸 포함하니 ? 맞니 아니니 ?
->boolean 값으로 반환되어짐.
.startsWith(문자 , 숫자) / .endsWith (문자 , 숫자)
.includes(문자 , 숫자)
숫자번째부터 문자가 있는지 확인. (숫자는 생략 가능.)

 

const str = 'both ends of a String';

console.log(str.startsWith('both'));
console.log(str.startsWith('ends'));
console.log(str.startsWith('ends', 5));
console.log(str.endsWith('String'));
console.log(str.includes('of'));
console.log();

 

문자열을 출력해서 검색해보자
1.문자열[인덱스]를 통한 방법.
2.문자열.CharAt(인덱스)를 통한 방법.

 

1.문자열[인덱스]를 통한 방법 : 나오지 않으면 undefined 반환
2.문자열.CharAt(인덱스)를 통한 방법 : 나오지 않으면 빈문자열 반환

const str = 'both ends of a String';

console.log(str[50]);          
console.log(str.charAt(50));

 

문자열의 인덱스 번호 검색
문자열.indexOf(’검색문자’, 어디서부터(상수))
문자열.lastindexOf(’검색문자’) - 역순검색.

 

-직접적으로 출력해서 확인하는 방법.

const str = 'both ends of a String';

 console.log(str.indexOf('t'));
 console.log(str.indexOf('t', 5));
 console.log(str.lastIndexOf('t'));

 

-반복문을 통해서 확인 하는 방법 . -> 주로 이방법을 쓰게되지 않을까?

 for (let ix = 0, findIx; ;) {
     findIx = str.indexOf('t', ix);
     if (findIx == -1) break; // 없으면 오류값으로 -1로 반환

     console.log(findIx);
     ix = findIx + 1;
 }

 

단 , 연산 우선이 대입 연산자(=) 보다 비교연산자(!=)의 우선순위가 높아 

대입연산자를 우선해야함.

그렇지 않을 경우 비교연산이 우선 적용되어 검색되는 값이 존재하지 않으면,

대입되지 않고 무한루프에 빠질 수 있다.

 

 

문자열의 아스키 코드화
아스키 코드의 문자열화 , 주로 사용하지 않아 간단히 표기하겠다.

 

console.log('A'.codePointAt());     //미 지정시 디폴트 0.
console.log('ABC'.codePointAt(인덱스번호))     → 문자열의 아스키 코드화

console.log(String.fromCharCode(65));
console.log(String.fromCharCode(97, 98));     →아스키코드의 문자열화.