문자열에 접근하는 함수 정리하기

1.원시 유형과 객체

원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 문자열로 예를 들겠습니다.

let str = "hello"
str.length; //5

자바스크립트에서 number와 boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다.

Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데 이런 객체를 "래퍼 객체"라고 부릅니다.

 

2.문자열의 길이 : length 프로퍼티

● 문자열.length 

문자열의 길이를 찾을 때는 배열에서처럼 length프로퍼티를 사용합니다.

let str = "Good morning!";
let greeting = "안녕하세요?";
str.length; //14
greeting.length; //6

3.문자열에서 문자의 위치 활용하기 - CharAt(), indexOf()메서드

● 특정 위치의 문자 접근하기 - charAt() 메서드

문자열.charAt(위치)

let str = "good morning!";
str.charAt(3) //d
str[5]; // m

인덱스는 0번지부터 시작합니다.

 

● 문자열에서 부분 문자열의 위치 찾기 - indexOf() 메서드

indexOf(문자열)

indexOf(문자열, 위치)

let str1 = "Good morning, everyone. Beautiful morning.";
str1.indexOf("morning"); //5
str1.indexOf("everyone"); //-1

4.문자열에 어떤 문자가 있는지 확인하기 - startsWith(), endsWith(), includes() 메서드

● 특정 문자나 문자열로 시작하는지 확인하기

● 문자열.startsWith(문자 또는 문자열)

str2 = "Hello, everyone.";

str2.startsWith("Hello"); //true
str.startsWith("hello"); //false
str2.startWith("He"); //true
str2.startsWith("Hello, ev"); //true

●문자열.startsWidth(문자 또는 문자열, 위치)

위치는 인덱스 번호입니다.

str2 = "Hello, everyone.";

str2.startsWith("el", 1); //true
str2.startsWith("o", 4); //true

 

● 문자열이 특정 문자나 문자열로 끝나는지 확인하기

● 문자열.endsWidth(문자나 문자열)

str2 = "Hello, everyone.";

str2.endsWith("everyone."); //true
str2.endsWith("Everyone."); //false
str2.endsWith("one."); //true
str2.endsWith("lo, everyone"); //false

● 문자열.endsWidth(문자열, 길이)

str2 = "Hello, everyone.";

str2.endsWith("one", 16);
str2.endsWith("lo", 5);

● 문자열에 특정 문자나 문자열이 포함되었는지 확인하기 - includes() 메서드

● 문자열.includes(문자열)

str2 = "Heelo, everyone.";
str2.indexOf("every") !== -1; //true

5.문자열에서 공백 제거하기 - trim(), trimStart(), trimEnd() 메서드

● 문자열.trim(); // 문자열의 앞뒤 공백을 제거합니다.

● 문자열.trimStart(); //문자열의 앞쪽 공백을 제거합니다.

● 문자열.trimEnd(); //문자열의 뒤쪽 공백을 제거합니다.

let str3 = " ab cd ef ";

str3.trim(); // "ab cd ef"
str3.trimStart(); //"ab cd ef "
str3.trimEnd(); //" ab cd ef"

6.문자열의 대소문자 바꾸기 - toUpperCase(), toLowerCase() 메서드

● 문자열.toUpperCase(); //문자열을 모두 대문자로 변환합니다.

● 문자열.toLowerCase(); //문자열을 모두 소문자로 변환합니다.

let str4 = "Good morning.";

str4.toUpperCase(); //GOOD MORNING
str4.toLowerCase(); //good morning

7.부분 문자열 추출하기 - substring(), slice() 메서드

● 문자열.substring(시작 위치) : 끝 위치를 지정하지 않으면 시작 위치부터 문자열 끝까지 추출해서 반환합니다.

● 문자열.substring(시작 위치, 끝 위치) : 끝 위치의 직전까지 추출하고 끝 위치는 포함되지 않습니다.

str4 = "Good morning.";

str4.substring(5); //morning.
str4.substring(0, 4); //Good

● slice() 메서드 

● 문자열.slice(시작위치) : 시작 위치만 지정하면 해당 위치만 추출합니다.

● 문자열.slice(시작위치, 끝위치) : 시작 위치와 끝 위치를 함께 지정하면 시작위치부터 끝 위치 직전까지 추출합니다.

str4 = "Good morning.";
str4.slice(0, 4); // Good
str4.slice(-5, 12); //ning

G     o    o     d       m  o  r   n  i   n   g  .

-13 -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1

 

8.구분자에 따라 문자 쪼개기 - split() 메서드

문자열.split(구분자) : 문자열에서 구분자를 기준으로 문자열을 쪼개 준 후 새로운 배열을 반환합니다.

str5 = "Hello everyone";

array = str5.split(" "); //["Hello", "everyone"]
array2 = str5.split(""); //["H","e","l""l""o"," ", "e","v","e","r","y","o","n","e"]

9.활용해보기

메일 소유자인지 확인하기 위해 이메일 주소를 전부 보여주지 않고 일부만 보여 줄때를 위해서 사용하는 예제입니다.

<div id="userInput">
  <label>
    <input type="email" id="userEmail" placeholder="이메일 주소를 입력하세요." autofocus>
  </label>
  <button>실행</button>
</div>
<div id="result"></div>


<script>
const email = document.querySelector("#userEmail");
const button = document.querySelector("button");
const result = document.querySelector("#result");

//button태그를 클릭하면 실행합니다.
button.addEventListener("click", function(){
    let username, domain, half;

    //email에 작성한 text를 가져왔을떄
    //text에 내용이 적혀있으면 실행합니다.
    if(email.value !== ""){
        //이메일 주소를 입력하면 @를 구분자로 넣습니다.
        username = email.value.split("@")[0];
        //username에 저장된 길이를 가져와서 2로 나눕니다.
        half = username.length / 2;
        //username에 저장된 값 중 0번지 부터 half에 저장된 값만큼 뺸 후 username에 저장합니다.
        username = username.substring(0, (username.length-half));
        domain = email.value.splite("@")[1];
        //username과 domain에 저장된 값들을 div태그인 .result에 넣어줍니다.
        result.innerText = `${username}...@${domain}`;
        //버튼 태그를 클릭 후 email에 적었던 내용을 빈텍스트로 만들어줍니다.
        email.value="";
    }
};
</script>

코드 설명

1.

const email = document.querySelector("#userEmail");
const button = document.querySelector("button");
const result = document.querySelector("#result");

querySelector("대상")로 클래스, 아이디, 태그를 찾습니다.

 

2.

//button태그를 클릭하면 실행합니다.
button.addEventListener("click", function(){
    let username, domain, half;

    //email에 작성한 text를 가져왔을떄
    //text에 내용이 적혀있으면 실행합니다.
    if(email.value !== ""){
        //이메일 주소를 입력하면 @를 구분자로 넣습니다.
        username = email.value.split("@")[0];
        //username에 저장된 길이를 가져와서 2로 나눕니다.
        half = username.length / 2;
        //username에 저장된 값 중 0번지 부터 half에 저장된 값만큼 뺸 후 username에 저장합니다.
        username = username.substring(0, (username.length-half));
        domain = email.value.splite("@")[1];
        //username과 domain에 저장된 값들을 div태그인 .result에 넣어줍니다.
        result.innerText = `${username}...@${domain}`;
        //버튼 태그를 클릭 후 email에 적었던 내용을 빈텍스트로 만들어줍니다.
        email.value="";
    }
};

버튼을 클릭햇을때 type:email에 내용이 적혀있다면 코드가 실행이 됩니다.

email.value로 email에 적힌 text를 가져옵니다.

그리고 그 text를 길이로 반환하고 2로 나눈 후 substring으로 0번지부터 뺀값만큼만 text를 가져오고 

이값들을 출력합니다.