본문 바로가기
Frontend/JavaScript

[Javascript] 문자열 메소드

by joy_95 2022. 1. 4.

 백틱(`)

✔️ 문자와 변수를 자유롭게 사용할 수 있음

✔️ 여러줄 사용 가능

let value = `이 식의 정답은 ${result} 이다.`;

let value = `이 값은
줄 바꿔쓰기도
가능`;

 

length

✔️ 문자열 길이

✔️ 주로 가입시 아이디, 비밀버호의 길이 제한할때 사용

let desc = '안녕하세요.';
console.log(desc.length); //6

 

특정 위치에 접근

✔️ 문자는 배열을 이용한 특정 위치에 접근할 수 있다. 

let desc = '안녕하세요';

console.log(desc[2]); //하

 

toUpperCase( ) / toLowerCase( )

let desc = "hi";
console.log(desc.toUpperCase()); // HI

let desc = "HI";
console.log(desc.toLowerCase()); // hi

 

str.indexOf( )

✔️ 문자를 인수로 받아 몇번째에 위치해 있는지 알려준다.

✔️ 0부터 계산시작.

✔️ 해당 문자가 없으면 -1을 반환한다.

let desc = "Hi guys. Nice to meet you";

// 해당 문자가 몇번째에 있는지 알려준다.
console.log(desc.indexOf('to')); //14

// 해당 문자가 없으면 -1을 반환한다.
console.log(desc.indexOf('man')); //-1

 

str.slice(n,m)

✔️ n부터 m까지의 문자열을 반환

    let desc = "abcdefg";

    //m이 없으면 문자열 끝까지 반환
    console.log(desc.slice(2));

    //m이 양수면 그 숫자까지 반환(해당 숫자 포함x);
    console.log(desc.slice(0,5)); //abced
    
    //m이 음수면 끝에서부터 샘
    console.log(desc.slice(2,-2)); //ced

 

str.substring(n,m)

✔️ n과 m사이 문자열 반환

✔️ n과 m을 바꿔도 동작

✔️ 음수는 0으로 인식

 

str.substr(n,m)

✔️ n부터 시작해서 m개를 가져옴.

 

 

str.trim( )

✔️ 앞 뒤 공백 제거

✔️ 주로 사용자 값을 받을 때 사용.

let desc = "  coding   ";

desc.trim(); //coding

 

str.repeat(n)

✔️ 문자열을 n번 반복

 

 

문자열 비교

✔️ 문자열도 비교가 가능하다.

✔️ 대문자가 소문자보다 값이 더 크다.

console.log("a"<"c"); //true

 

 

연습 예제

✔️ 배열 속 텍스트에서 문자만 뽑아내기

//배열 속 텍스트에서 문자만 뽑아내기
let list = [
  "01. 들어가며",
  "02. js의 역사",
  "03. 자료형",
  "04. 함수",
];

//배열을 뽑아내려면 반복문을 돌려야한다.
//새로운 배열을 넣어줄 배열을 만들어줘야한다.
//새로 배열을 넣을 때는 push를 이용해 줄 수 있다.

lew newList = [];

for(let i=0; i<list.length; i++){
  newList.push(
    list[i].slice(4)
  )
}

console.log(newList);

 

✔️  indexOf로 금칙어 뽑아내기

function hasCola(str){
//indexOf는 값이 없으면 -1을 반환하고, 해당 값이 첫번째에 있으면 0이 반환되면서 false값을 반환하기 때문에
//해당 값이 > -1 를 설정해줘야 한다.

  if(str.indexOf("콜라") > -1) {
    console.log("금칙어가 있습니다.");
  } else{
    console.log("통과");
  }
}

hasCola("와 사이다가 짱이야!"); //-1
hasCola("무슨소리 콜라가 짱이야");
hasCola("콜라"); //0

 

✔️  indexOf 안쓰고 includes 쓰면 더 편안.

 

 

Reference

  • https://www.youtube.com/watch?v=G360D6lqrfo&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=6

 

반응형

'Frontend > JavaScript' 카테고리의 다른 글

[Javascript] 구조 분해 할당  (0) 2022.01.07
[Javascript] Array methods(1)  (0) 2022.01.05
[Javascript] 화살표 함수  (0) 2022.01.04
[Javascript] 함수 표현식  (0) 2022.01.04
[Javascript] 함수  (0) 2022.01.04