문자열에 대해서 알아보자

10 - 1 문자열에 접근하기

자바스크립트에서는 간단한 텍스트를 처리하려고 문자열 유형을 사용하곤 합니다.

원시 유형과 객체

단순히 값만 가지고 있는 경우 '원시 유형'이라고 하고, 프로퍼티와 메서드를 가진 경우 '객체'라고 합니다.

자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다.

 

• 프로퍼티(property)는 일부 객체 지향 프로그래밍 언어에서 필드(데이터 멤버)와 메소드 간 기능의 중간인 클래스 멤버의 특수한 유형입니다.
• 메서드(method) 또는 멤버 함수(member function)는 객체 지향 프로그래밍에서 객체과 관련된 서브 루틴 (또는 함수)이며 데이터와 멤버 변수에 대한 접근 권한을 갖습니다.

 

예를 들어보면, 

간단히 변수에 문자열을 할당한 후 length 라는 프로퍼티를 사용해봤습니다.

str 변수에 length 하는 프로퍼티를 정의하지 않았는 데도 length 프로퍼티를 사용할 수 있습니다.

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

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

number 나 boolean, string 과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다.

그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사라져 버립니다. 

힐요할 때만 임시로 객체로 바꿔 사용하고 끝나면 다시 원시 유형으로 돌아오는데 이것을 오토박싱(autoboxing)이라고 합니다.

문자열의 길이 - length 프로퍼티

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

문자열.length

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

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

문자열은 여러 개의 문자가 나열되어 있으므로 배열처럼 각 문자의 위치를 가리키는 인덱스가 있다고 가정해서 사용합니다.

위치와 관련된 주요 메서드는 charAt() 메서드와 indexOf() 메서드가 있습니다.

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

위치는 인덱스로 표시되는데, 인덱스는 0부터 시작합니다.

문자열.charAt(위치)

charAt() 메서드를 사용해서 str 문자열에서 인덱스가 3인 요소와 인덱스가 5인 요소를 가져오는 예제입니다.

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

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

2개 이상의 단어로 구성된 문자열에는 공백으로 구분되는 여러 개의 부분 문자열이 있을 수 있습니다. 

문자열에서 부분 문자열이 어디에 있는지 검색할 때 indexOf() 메서드를 사용하면 편리합니다.

indexOf() 메서드는 괄호 안의 문자열이 나타난 위치를 알려주고 '위치' 값을 생략할 경우에는 문자열이 나타난 첫 번째 위치를 알려줍니다.

문자열.includes(문자열)

str1 이라는 문자열에서 morning 이라는 문자열을 찾으려면 다음과 같이 써야합니다.

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

이 때 반환값은 morning 문자열이 나타난 첫 번째 위치입니다.

만약 찾으려는 문자열이 없으면 -1을 반환합니다.

// str1 = "Good morning, everyone. Beautiful morning."
firstIndex = str1.indexOf("morning") //5. 첫 번째 "morning"의 위치
str1.indexOf("morning", firstIndex+1) //34. 두 번째 "morning"의 위치

str1에는 morning 2개가 있는데, 두 번째 morning 의 위치도 알고 싶으면 다음과 같이 씁니다.

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

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

🫒 특정 문자나 문자열로 시작하는지 확인하기 - startsWith() 메서드

확인할 문자나 문자열에서 영문자의 대소문자를 구별하므로 주의해야 합니다.

결괏값은 true 나 false 입니다.

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

예를 들면,

str2 = "Hello, everyone."
str2.startsWith("Hello") //true
str2.startsWith("hello") //false
str2.startsWith("He") //true
str2.startsWith("Hello, ev") //true

이런 결과가 나옵니다.

 

startsWith() 메서드는 위치를 함께 지정하면 특정 문자나 문자열이 해당 위치부터 시작하는지의 확인이 가능합니다.

문자열.startsWith(문자 또는 문자열, 위치)

//str2 = "Hello, everyone."
str2.startsWith("el", 1) //true
str2.startsWith("o", 4) //true

str2 에서 인덱스 1(두 번째 값)은 el 로 시작하고, 인덱스 4(다섯 번째 값)는 o로 시작하므로 모두 true가 됩니다.

🍊 문자열이 특정 문자나 문자열로 끝나는지 확인하기 - endsWith() 메서드

이 메서드의 결괏값도 true 나 false 이고, 영문자의 대소문자를 구별합니다.

문자열.endsWith(문자나 문자열)

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

endsWtih() 메서드를 사용할 때 문자열과 함께 길이(length)를 지정할 수 있습니다.

이 때 startsWith() 메서드에서는 위치를, endsWith() 메서드에서는 길이를 사용한다는 것을 구분하세요.

문자열.endsWith(문자열, 길이)

str2.endsWith("one", 16) //true, 'Hello, everyone'의 마지막은 one.입니다.
str2.endsWith("lo", 5) //true, 'Hello'의 마지막은 lo입니다.

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

문자열에 특정 문자나 문자열이 포함되었는지 확인할 때 includes() 메서드를 사용할 수 있습니다.

문자열.includes(문자열)

str2.includes("every") //true

10 - 2 문자열 메서드 활용하기

큰따옴표나 작은따옴표로 묶기만 하면 모든 자료는 문자열이 될 수 있습니다.

그러다 보니 문자열 안에 있는 불필요한 공백을 제거해야 하거나, 영문자의 대소문자를 특정한 형태로 바꿔서 표시해야 할 수도 있습니다. 

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

문자열에서 공백이란 스페이스바를 눌러 입력한 공백과 탭을 눌러 입력한 공백, 그리고 줄을 바꾸기 위해 사용한 이스케이프 문자(\n, \r) 등을 말합니다.

공백을 넣을 수도 있고, 원래의 공백을 그대로 표시할 수도 있습니다.

하지만 연산에 사용하기 위해 공백을 제거할 경우 string 객체에 있는 메서드를 사용하면 간단히 삭제할 수 있습니다.

문자열.trim() //문자열의 앞뒤 공백을 제거합니다.
문자열.trimStart() //문자열의 앞쪽 공백을 제거합니다.
문자열.trimEnd() //문자열의 뒤쪽 공백을 제거합니다.

let str3 = " ab cd ef "
str3.trim() //'ab cd ef'
str3.trimStart() //'ab cd ef   '
str3.trimEnd() //'   ab cd ef'

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

영문자 문자열의 경우에는 모두 대문자로, 또는 모두 소문자로 바꿀 수 있습니다.

문자열.toUpperCase() //문자열을 모두 대문자로 변환
문자열.toLowerCase() //문자열을 모두 소문자로 변환

let atr4 = "Good morning"
str4.toUpperCase() //"GOOD MORNING"
str4.toLowerCase() //"good morning"

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

문자열 중에서 특정 문자열만 추출할 때는 substring() 메서드와 slice() 메서드를 사용합니다.

🥐 substring() 메서드

시작 위치부터 끝 위치의 직전까지 추출해서 변환합니다.

이 때 끝 위치의 직전까지 추출하고 끝 위치는 포함되지 않는다는 점을 잊지 마세요.

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

문자열.substring(시작 위치)
문자열.substring(시작 위치, 끝 위치)

str4 문자열에서 morning 부분만 추출하려면 다음과 같이 씁니다.

// str4 = "Good morning."
str4.substring(5) //"morning."

🥨 slice() 메서드

substring() 메서드와 거의 비슷하게 사용이 가능합니다.

시작 위치만 지정하면 해당 위치부터 끝까지, 시작 위치와 끝 위치를 함께 지정하면 시작 위치부터 끝 위치 직전까지 추출합니다.

문자열.slice(시작 위치)
문자열.slice(시작 위치, 끝 위치)

//str4 = "Good morning."
str4.slice(0,4) //"Good"

slice() 메서드는 위치를 지정할 때 substring() 메서드와 달리 음수를 사용할 수 있습니다.

음수로 지정하면 문자열의 끝에서부터 위치를 찾으므로 문자열을 뒤에서부터 자를 경우에는 slice() 메서드가 편리합니다.

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

문자열에서 구분자를 기준으로 문자열을 쪼개 줍니다.

문자열.split(구분자)

예를 들어 str5 문자열을 단어별로 구별하려면, 구분자를 공백으로 지정해서 split() 메서드를 실행해야 합니다.

split() 메서드는 새로운 배열을 반환합니다.

str5 = "Hello everone"
array1 = str5.split(" ") //["Hello", "everyone"]

만약 문자열을 각각의 글자로 나누어서 문자 배열로 반환하려면 구분자를 큰따옴표("")로 지정합니다.

이렇게 글자별로 구분할 때는 큰따옴표와 큰따옴표 사이에 공백이 없어야 합니다.

🍦 보안을 위해 이메일 주소의 일부 감추기

회원제 사이트에서 개인 정보를 표시할 때 보안을 위해, 또는 메일 소유자인지 확인하기 위해 이메일 주소를 전부 보여 주지 않고 일부만 보여 줄 때가 있습니다.

앞의 내용 세 자리까지만 보여주는 프로그램입니다.

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

이메일 주소를 입력받을 텍스트 필드(userEmail)와 버튼, 그리고 결괏값이 표시될 영역(result)이 있습니다.

const email = document.querySelector("#userEmail"); //메일 주소 입력 부분
const button = document.querySelector("button"); //버튼
const result = document.querySelector(#result); //결과 표시 영역

button.addEventListener("click", function(){

});

텍스트 필드와 버튼, 결괏값이 표시될 영역을 가져와서 변수에 할당하고 버튼을 클릭했을 때 함수를 실행하도록 입력했습니다.

button.addEventListener("click", function(){
	let username, domain;
    
    if(email.value !== "") {
    username = email.value.split("@")[0]; //@ 기준으로 앞부분
    username = username.substring(0,3); //username 중 세 자리만 필요
    domain = email.value.split("@")[1]; //@ 기준으로 뒷부분
    result.innerText = `${username}...@${domain}`; //결과 표시
    email.value = ""; //텍스트 필드를 지움
    }
});

버튼을 클릭했을 때 실행할 함수를 채웠습니다.

이메일 주소는 @을 기준으로 앞부분은 사용자 이름이고 뒷부분은 도메인 주소이므로 @의 앞부분과 뒷부분 문자열을 분리해야 합니다.

이 때 email 변수에는 텍스트 필드가 들어있으므로 email.value로 값을 가져옵니다.

그리고 split() 메서드를 사용해서 @의 앞부분과 뒷부분으로 나눕니다.

나눈 문자열의 앞부분은 username에, 뒷부분은 domain에 저장합니다.

username 중에서 세 자리만 필요하므로 왼쪽부터 세 번째까지만 꺼내 다시 username에 할당하고, 수정한 username과 @ 그리고 도메인을 연결해서 result 영역에 표시했습니다.

 

사용자의 이름을 절반만 표시할 수도 있습니다.

button.addEventListener("click", function(){
	let username, domain, half;
    
    if(email.value !=="") {
    	username = email.value.split("@")[0]; //@ 기준으로 앞부분
        half = username.length / 2; //username의 길이를 절반으로 나눔
        username = username.substring(0, (username.length - half)); //username에서 절반으로 나눈 위치까지만 추출
        domain = email.value.split("@")[1]; //@ 기준으로 뒷부분
        result.innerText = `${username}...@${domain}`; //결과를 표시
        email.value =""; //텍스트 필드를 지움
    }
});