[DAY - 25] charAt, slice, substring, toLowercase / toUppercase, concat, trim, indexOf, search, includes, split, replace, padstart

• charAt
• slice
• substring
• toLowercase / toUppercase
• concat
• trim
• indexOf
• search
• includes
• split
• replace
• padstart
  
  
  
  
  

1) charAt

charAt() 함수는 문자열에서 특정 위치(index)에 있는 문자를 반환할 때 사용한다.

반환된 값은 문자(string)로 인식된다.

'use strict';

let str = '안녕하세요';
console.log(`${str.length}`);
console.log(`${str.charAt(0)}`);
console.log(`${str.charAt(1)}`);
console.log(`${str.charAt(2)}`);
console.log(`${str.charAt(3)}`);
console.log(`${str.charAt(4)}`);
console.log(`===================`);

for( let i = 0; i < str.length; i++) {
    console.log(`${str.charAt(i)}`);
}
console.log(`===================`);

for (let x in str) {
    console.log(x);
}
console.log(`===================`);
for (let x of str) {
    console.log(x);
}
console.log(`===================`);
let a = 100;
console.log(a.toString().charAt(0));



5
안
녕
하
세
요
===================
안
녕
하
세
요
===================
0
1
2
3
4
===================
안
녕
하
세
요
===================
1

안녕하세요의 첫 번째 글자인 안을 반환하고 싶으면 charAt(1)이 아닌 charAt(0) 혹은 charAt()를 써야 한다.

str {

0 : 안

1 : 녕

2 : 하

3 : 세

4 : 요

}

와 같은 index 성격을 띠는 것 같다.

따라서 키을 찾는 for ~ in과 값을 찾는 for ~of의 결과가 다르게 나온다.

 

    <script>
        'use strict';
        let x = prompt(`주민등록번호 뒷자리 입력`);
        let ch = x.charAt(0);

        if(x==" " || isNaN(x)==true || x.charAt(0)==""){
            alert(`형식이 잘못되었습니다`);
        } else if(x.length!=7){
            alert(`7자리 숫자만 입력하세요`);
        } else if(ch==1 || ch==3){
            alert(`남자입니다`);
        } else if(ch==2 || ch==4){
            alert(`여자입니다`);
        } else {
            alert(`범위초과`);
        }
    </script>

charAt를 활용해 입력받은 숫자의 첫자리에 따른 성별 결과를 출력할 수 있다.

 

2) slice

slice(시작인덱스, 종료인덱스)

시작인덱스부터 종료인덱스까지의 값을 반환한다.

원본 배열을 바꾸진 않는다.

let str = `안녕하세요 만나서 반갑습니다.`;
console.log(`1. ${str.slice(1, 3)}`);
console.log(`2. ${str.slice(2, 5)}`);
console.log(`3. ${str.slice(3)}`);
console.log(`4. ${str.slice()}`);

console.log(`5. ${str.slice(-4, -1)}`)
console.log(`6. ${str.slice(-5, -2)}`)
console.log(`7. ${str.slice(3, -2)}`)



1. 녕하
2. 하세요
3. 세요 만나서 반갑습니다.
4. 안녕하세요 만나서 반갑습니다.
5. 습니다
6. 갑습니
7. 세요 만나서 반갑습니

charAt와 마찬가지로 '안'은 0이므로 slice(1, 3)를 하면 '녕'부터 반환된다.

또한 음수를 넣게 되면 뒤에서부터 카운트하게 된다.

 

3) substring

slice와 같지만 음수는 사용 불가능하다는 차이점이 있다.

let str = `안녕하세요 만나서 반갑습니다.`;
console.log(`1. ${str.substring(1, 3)}`);
console.log(`2. ${str.substring(2, 5)}`);
console.log(`3. ${str.substring(3)}`);
console.log(`4. ${str.substring()}`);
console.log(`5. ${str.substring(-4, -1)}`)
console.log(`6. ${str.substring(-5, -2)}`)



1. 녕하
2. 하세요
3. 세요 만나서 반갑습니다.
4. 안녕하세요 만나서 반갑습니다.
5.
6.

4) toLowercase / toUppercase

toLowercase : 소문자로 반환

toUppercase : 대문자로 반환

let str = 'String Test';
let str1 = str.toLowerCase();
// 소문자
let str2 = str.toUpperCase();
// 대문자

console.log(`소문자 : ${str1}`);
console.log(`대문자 : ${str2}`);



소문자 : string test
대문자 : STRING TEST

 

5) concat

'use strict';

let str1 = '안녕';
let str2 = '잘가';

let str3 = str1.concat(str2);
let str4 = str1 + str2;

console.log(str3);
console.log(str4);



안녕잘가
안녕잘가

두 배열을 연결해 새로운 배열을 만든다.
원본 배열을 바꾸진 않는다.

* str1 + str2와 어떤 차이점이 있는지 잘 모르겠지만 알아두면 좋다고 했다.

 

6) trim

공백 제거

let str = '            안녕    잘가    '

console.log(`|${str}|`);
console.log(`|${str.trim()}|`);
// 앞뒤 공백 제거
console.log(`|${str.trimStart()}|`);
// 앞쪽 공백 제거
console.log(`|${str.trimEnd()}|`);
// 뒤쪽 공백 제거



|            안녕    잘가    |
|안녕    잘가|
|안녕    잘가    |
|            안녕    잘가|

문자열의 앞뒤 혹은 앞, 뒤만 공백을 제거할 때 사용한다.

 

7) indexOf

indexOf(검색값)

indexOf(찾을값, 찾기 시작할 위치)

let str = '안녕하세요. 만나서 반갑습니다. 다음에 또 만나요.'
let a = str.indexOf('안');
let b = str.indexOf('안녕');
let c = str.indexOf('반');
let d = str.indexOf('반', 10);
let e = str.indexOf('고');


console.log(`1. ${a}`);
console.log(`2. ${b}`);
console.log(`3. ${c}`);
console.log(`4. ${d}`);
console.log(`5. ${e}`);


1. 0
2. 0
3. 11
4. 11
5. -1

찾을 값과 일치하는 첫 번째 index를 반환한다.

만약 일치하는 값이 없다면 e와 같이 -1이 반환된다.

 

8) search

indexOf와 비슷하지만 search는 정규 표현식 객체에 사용한다는 차이점이 있다.

* 정규 표현식은 아직 배우지 않았지만 추후에 배운다고 한다.

let str = '안녕하세요. 만나서 반갑습니다. 다음에 또 만나요.'
let a = str.search('안');
let b = str.search('안녕');
let c = str.search('반');
let d = str.search('반', 10);
let e = str.search('고');


console.log(`1. ${a}`);
console.log(`2. ${b}`);
console.log(`3. ${c}`);
console.log(`4. ${d}`);
console.log(`5. ${e}`);
console.log(`-----------------------`);

let str1 = str.search('잘가');
if(str1!==-1) {
    console.log(`검색 결과 : ${str1}번째`);
} else {
    console.log(`검색 결과 없음`);
}



1. 0
2. 0
3. 11
4. 11
5. -1
-----------------------
검색 결과 없음

 

9) includes

값의 위치 또는 순서를 반환하는 다른 메서드와 다르게 includes는 값이 존재하면 true, 존재하지 않으면 false를 반환해 준다.

let str = '안녕하세요. 만나서 반갑습니다. 다음에 또 만나요.'

let a = str.includes('안');
let b = str.includes('만나');
let c = str.includes('요');
let d = str.includes('김');
let e = str.includes('반갑읍니다');

console.log(`1, ${a}`);
console.log(`2, ${b}`);
console.log(`3, ${c}`);
console.log(`4, ${d}`);
console.log(`5, ${e}`);

let str1 = '잘가';
if(str.includes(str1)) {
    console.log(`${str1}은/는 ${str}에 있습니다.`);
} else {
    console.log(`${str1}은/는 ${str}에 없습니다.`);
}



1, true
2, true
3, true
4, false
5, false
잘가은/는 안녕하세요. 만나서 반갑습니다. 다음에 또 만나요.에 없습니다.

따라서 if문을 작성할 때 조건문에 includes를 사용하면 true가 바로 출력되므로 간단하게 조건문을 작성할 수 있다.

 

10) split

문자열을 끊어 분리한 후 분리한 것마다 배열로 처리해 반환해 준다.

let str = '안녕 재석 홍철 길 하하';

let a1 = str.split('');
console.log(typeof a1, a1);
console.log(`------------------`)
let a2 = str.split(' ');
console.log(typeof a2, a2);
console.log(`------------------`)
let str1 = '빨강,  초록  , 파랑,노랑  ,  분홍 , 검정'
let a3 = str1.split(',');
console.log(typeof a3, a3);

for(let i=0; i<a3.length; i++){
    console.log(`#${a3[i].trim()}`);
}
console.log(`------------------`)
for(let x in a3) {
    console.log(x);
}
console.log(`------------------`)
for(let x of a3) {
    console.log(x);
}



object [
  '안', '녕', ' ',  '재',
  '석', ' ',  '홍', '철',
  ' ',  '길', ' ',  '하',
  '하'
]
------------------
object [ '안녕', '재석', '홍철', '길', '하하' ]
------------------
object [ '빨강', '  초록  ', ' 파랑', '노랑  ', '  분홍 ', ' 검정' ]
#빨강
#초록
#파랑
#노랑
#분홍
#검정
------------------
0
1
2
3
4
5
------------------
빨강
  초록
 파랑
노랑
  분홍
 검정

split() : 문자열을 length가 1인 배열로 반환

split('') : 공백 포함 한 글자씩 나누어 배열

split(' ') : 문자열을 단어별(구분자)로 나누어 배열

split(' ,') : , 구분자를 기준으로 나누어 배열 

 

11) replace

replace는 문자열을 찾아 원하는 문자열로 바꿀 때 사용한다.

let str = 'I like apple'
let str1 = '나는 김사과 입니다.'
let str2 = str.replace('apple', 'orange')
let str3 = str1.replace('사과', '오렌지')

console.log(`1. ${str}`);
console.log(`2. ${str1}`);
console.log(`3. ${str2}`);
console.log(`4. ${str3}`);



1. I like apple
2. 나는 김사과 입니다.
3. I like orange
4. 나는 김오렌지 입니다.

12) padstart

문자열을 다른 문자열로 채워 길이를 맞출 때 사용한다.

let str1 = '5';
let str2 = str1.padStart(6, 0);
console.log(str2);

let str3 = str1.padEnd(6, 0);
console.log(str3);

let str4 = str1.padEnd(6, '!');
console.log(str4);



000005
500000
5!!!!!

 

13) 검색 예제

소문자, 대문자 또는 소문자와 대문자가 섞인 문자열에서 대소문자 상관없이 문자열을 검색할 수 있는 예제를 구현해 보았다.

let str ='Good morning afternoon evening DOG CAT Naver dog Cat Goole Nate naver MORNING'

let txt = 'doG';

if(
    str.toLowerCase().includes(txt.toLowerCase())
     || 
    str.toLowerCase().indexOf(txt.toLowerCase())!==-1){
    console.log(`${txt} 찾음`);
} else {
    console.log(`${txt} 못찾음`);
}

찾을 문자열인 txt와 찾을 문자열이 들어있는 문자열인 str을 모두 toLowerCase를 사용해 소문자로 변환한 뒤 if문으로 비교해 결과가 나오게 했다.