- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
문자열 접근하기
원시유형과 객체
단순히 값만 가지고 있을 경우에는 원시유형이고 프로퍼티와 메서드를 가지고 있을때는 객체라고 설명했습니다.
문자열의 길이 length 프로퍼티
문자열의 길이를 찾을떄 프로퍼티 입니다.
기본형 : 문자열.length예제
let str = "good morning!";
console.log(str.length);
//14문자열에서 문자 위치의 위치 활용하기 - charAt(), infexOf() 메서드
특정위치의 문자 접근하기 - charAt()메서드
문자열에서 특정 위치의 문자를 가져오려면 chatAt() 함수를 사용합니다. ESMA2015부터는 별도의 메서드 없이 배열처럼 대괄호([])를 사용할 수 있습니다. 위치는 인덱스로 표시되는데, 인덱스는 0부터 시작합니다.
기본형 : 문자열.charAt(위치)예제
let str = "Good morning!";
console.log(str.cahrAt(3));
// "d"
console.log(str[5])
// "m"문자열에서 부분 문자열의 위치 찾기 -indexOf 메서드
기본형 : indexOf(문자열)
기본형 : indexof(문자열,위치)2개 이상의 단어로 구성된 문자열에는 공백으로 구분되는 여러 개의 부분 문자열이 있을 수있습니다. 문자열에서 부분 문자열이 어디에 있는지 검색할때 indexOf() 메서드르르 사용하면 편리합니다. 만약 찾는 문자열이 없으면 -1을 반환합니다.
예제
let str1= "Good morning, everyone. Beautiful morning."
console.log(str1.indexOf("moring")) //5
console.log(str1.indexOf("evening") // -1문자열에 어떤 문자가 있는지 확인하기 -startsWith(), -endWith(), includes() 메서드
ESMA 2015 이전에는 indexOf() 메서드를 응용해서 문자열의 시작과 끝에 특정 문자나 문자열이 있는지 확인했습니다.
ESMA2015부터는 용도에 맞는 메서들이 추가 되었습니다.
특정문자나 문자열로 시작하는지 확인하기 -startWith()메서드
확인할 문자나 문자열에 영문자의 대소문자를 구별하므로 주의합니다. 결과값은 flase 나 true 입니다.
기본형 : 문자열.startsWidth(문자열 또는 문자열)
기본형 : 문자열.startsWidth(문자열 또는 문자열, 위치)예제
let str2 = "Hello, everyone."
console.log("Hello") // true
console.log("hello) //flase
console.log("el", 1) //true
console.log("o", 4) //true문자열이 특정 문자나 문자열로 끝나는지 확인하기 - endsWith() 메서드
이 메서드의 결괏값도 true 나 false이고 영문자의 대소문자를 구별합니다.
기본형 : 문자열.endWith(문자나 문자열)
기본형 : 문자열.endWith(문자열,길이)예제
let str2 = "Hello, everyone."
console.log(str2.endsWith("everyone") //true
console.log(str2.endsWith("Everyone") //false
console.log(str2.endsWith("one", 16) //true str2 의 문자열의 마지막은 one.입니다.
console.log(str2.endsWith("lo", 5) //true문자열에 특정 문자나 문자열이 포함되었는지 확인하기 - includes() 메서드
이메서드도 영문자의 대소문자를 구별합니다.
기본형 : 문자열.includes(문자열)예제
let str2 = "Hello, everyone."
console.log(str2.indexOf("every") !== -1 //true문자열 메서드 활용하기
문자열에서 공백 제거하기 -trim(),trimStart(),trimEnd() 메서드
문자열에서 공백이란 spacebar를 눌러 입력한 공백과 tab을 눌러 입력한 탭, 그리고 줄을 바꾸기 위해 사용하는 이스케이프 문자(\n, \r) 등을 말합니다.
기본형 : 문자열.trim() //문자열 앞뒤 공백을 제거합니다.
기본형 : 문자열.trimStart() //문자열의 앞쪽 공백을 제거합니다.
기본형 : 문자열.trimEnd() //문자열의 뒤쪽 공백을 제거합니다.예시
let str3 = " ab cd df "
console.log(str3.trim()) // "ab cd df"
console.log(str3.Starttrim()) // "ab cd df "
console.log(str3.Endtrim()) // " ab cd df"문자열의 대소문자 바꾸기 - toUpperCase(), toLowerCase() 메서드
영문자의 문자열의 경우에는 모두 대문자로, 또는 모두 소문자로 바꿀수 있습니다.
기본형 : 문자열.toUpperCase() //문자열을 모두 대문자로 변환합니다.
기본형 : 문자열.toLowerCase() //문자열을 모두 소문자로 변환합니다.예시
let str4 = "Good morning."
console.log(str4.toUpperCase()) // "GOOD MORNING."
console.log(str4.toLowerCase()) // "good morning."부분 문자열 추출하기 - substring(), slice()메서드
문자열 중에서특정 문자열만 추출할 떄는 substring() 메서드와 slice()메서드를 사용합니다.
substring메서드
subsring() 메서드는 시작 위치부터 끝 위치의 직전까지 추출해서 반환합니다.
기본형 : 문자열.substring(시작위치)
기본형 : 문자열.substring(시작위치, 끝 위치)예제
let str4 "Good morning."
console.log(str4.substring(5)) //"morning"
console.log(str4.substring(0,4)) //"Good"slice()메서드
시작위치만 지정하면 해당 위치 끝까지, 시작 위치와 끝 위치를 함께 지정하면 시작 위치부터 끝 위치직전까지 추출합니다.
기본형 : 문자열.slice(시작위치)
기본형 : 문자열.slice(시작위치, 끝위치)예제
let str4= "Good morning."
console.log(str4.slice(0,4)) // "Good"
//참고로 위치값에 음수가 들어가면 무조건 0으로 바꿔서 실행합니다.구분자에 따라 문자 쪼개기 - split()메서드
문자열의 split()메서드는 문자열에서 구분자를 기준으로 문자열을 쪼개 줍니다.
기본형 : 문자열.split(구분자)예제
let str5 ="Hello everyone"
array1 = str5.split(" ") // ["Hello", "everyone"]
array1 = str5.split("") // ["H","e","l,","l","o","","e","v","e","r","y","o","n","e"]보안을 위해 이메일 주소의 일부 감추기
HTML 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메일 주소 일부 가리기</title>
<link rel="stylesheet" href="css/email.css">
</head>
<body>
<div id="userInput">
<label>
<input type="email" id="userEmail" placeholder="이메일 주소를 입력하세요." autofocus>
</label>
<button>실행</button>
</div>
<div id="result"></div>
<script src="js/email-result.js"></script>
</body>
</html>JS코드입니다.
const email = document.querySelector("#userEmail");
const button = document.querySelector("button");
const result = document.querySelector("#result");
button.addEventListener("click", function() {
let username, domain;
if (email.value !== "") {
username = email.value.split("@")[0]; // @ 기준으로 쪼개어 앞부분 저장
username = username.substring(0, 3); // username 중 3자리만 필요
domain = email.value.split("@")[1]; // @ 기준으로 쪼개어 뒷부분 저장
result.innerText = `${username}...@${domain}`;
}
});
/*************************************************
@앞에 표시할 username의 갯수를 고정하지 않고
username 길이의 반만 표시하려고 할 때
**************************************************/
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 = ""; // 텍스트 필드 지우기
}
});