19. String
19-1. String 파헤치기!
이제까지 쌍따옴표("") 안에 텍스트가 들어가면 String형 이라고 배웠습니다.
사실은 지금까지 코드에 홑따옴표도 많이 썼습니다.
쌍따옴표든, 홑따옴표든 모두 String형 값에 사용합니다.
둘 중에 어떤 것을 써야 하는지는, 회사 규정에 따라 다릅니다.
저는 이제까지 홑따옴표를 주로 썼고,
이제까지 다닌 회사에서는 모두 그렇게 코딩 컨벤션(코드작성가이드)을 맞췄습니다.
세계에서 가장 보기좋게 코딩컨벤션을 작성한 곳은 airbnb 입니다.
한 번 가서 눈으로 보세요. 👉 에어비앤비 코딩컨벤션
let good = '이것도 맞고';
let better = "이것도 맞습니다";19-2. 대소문자 바꾸기
String형에서 제공하는 기본 함수들이 많은데 대표적으로 알아서 대소문자를 바꿔주는 함수가 있습니다.
이런 함수는 언제 필요 할까요? 일단 아래의 결과가 어떤지 console.log 로 확인해 봅시다.
console.log('js' === 'js'); // true
console.log('Js' === 'js'); // false결과에서 보듯이 String의 대소문자가 구분됩니다.
웹사이트에 검색기능이 있는 경우 Js 라고 검색 했을 때, J 가 정확히 대문자인 것만 찾아주는 것이 아니라, 대소문자 구분 없이 js 라는 단어가 포함된 모든 컨텐츠를 찾고 싶을 수가 있습니다.
아래와 같이 임의의 String을 작성하고 toUpperCase 와 toLowerCase 메소드를 호출하여 반환되는 값을 확인해 봅시다.
let lastName = 'Yeri Kim';
let upperLastName = lastName.toUpperCase();
let lowerLastName = lastName.toLowerCase();
console.log(lastName); // Yeri Kim
console.log(upperLastName); // YERI KIM
console.log(lowerLastName); // yeri kimlastName 이라는 변수에 String형의 값을 할당하면, lastName 변수는 String형의 변수가 됩니다.
그러면 lastName 은 String형이 제공하는 모든 메소드를 사용할 수 있게 됩니다.
toUpperCase 와 toLowerCase 함수는 String에서 제공하는 메소드 입니다.
그리고 console 에서 확인한 것과 같이, lastName 에 toUpperCase 함수를 사용한다고 lastName 변수
의 값 자체가 바뀌지는 않았습니다.
lastName 는 이전 값을 그대로 갖고 있습니다.
(이 문장이 이해 되려면 코드를 직접 작성해보셔야 합니다!)
19-3. 문자 길이
배열을 배우는 시간에, 배열의 길이는 length 라는 속성으로 알 수 있다고 배웠었죠?
문자인 String형도 length 라는 속성으로 길이를 알 수 있습니다.
length 는 자주 사용하는 속성 중 하나 입니다.
회원가입을 받을 때 이름에 10자가 넘어갔는지 체크하거나, 한국의 핸드폰 번호는 무조건 10자 아니면 11자 이므로, 사용자가 값을 잘못 입력했는지 체크할 때 유용하게 사용합니다.
다음 예제는 핸드폰 번호(phoneNumber)가 10자리도 아니고, 11자리도 아니면 alert 를 보여줍니다.
if (phoneNumber.length !== 10 && phoneNumber.length !== 11) {
alert("폰 번호 제대로 입력하셨나요?");
}함께 코딩 해봅시다.
let name = prompt("성함을 입력해주세요");
if (name.length === 2) {
alert("외자이시군요! 이름이 이쁘네요.");
} else if (name.length === 1) {
alert("제대로 입력하셨나요?");
} else if (name.length === 3) {
alert("멋진 이름입니다.");
}참고.
핸드폰 번호는 01012349876 으로, 항상 0으로 시작합니다.
아시다시피 0으로 시작하는 숫자 표현식은 없습니다. (아이스크림 023개 주세요! 라고 하지는 않죠.)
그래서 핸드폰 번호는 숫자로 이루어져 있지만,
문자열로 관리해야 컴퓨터가 첫 숫자인 "0"도 갖고 있게 됩니다.
아래의 결과가 어떤가요?
let phoneNumber = 01012349876;
console.log(phoneNumber);
console.log(phoneNumber.length);이와 같이 phoneNumber 는 Number형이며, 앞의 0이 없이 뒷 숫자만 할당되었습니다.
또한, Number형에는 length 라는 속성이 존재하지 않습니다.
그렇기 때문에, 핸드폰 번호를 온전히 표시하고 length 속성을 이용하려면
아래와 같이 String형으로 저장해야합니다.
let phoneNumber = "01012349876";
console.log(phoneNumber);
console.log(phoneNumber.length);19-4. 문자열 찾기
let info = "JavaScript는 프로그래밍 언어이다.";위의 설명에 "프로그래밍" 이라는 단어가 포함 됐는지 알고 싶습니다.
indexOf 메소드는 문자열에 특정 문자열이 들어있는지 확인하고,
만약 있다면 몇번 째 순서에 해당 문자열이 있는지 알려 줍니다.
해당 문자열이 없다면 -1을 반환합니다.
이렇게 특정 문자열을 찾는 함수가 왜 필요 할까요? 예시를 들어보겠습니다.
댓글에 욕설이 포함되면 달지 못하도록 차단할 때 사용할 수 있습니다.
차단할 단어 모음이 존재한다고 하고,
사용자가 댓글을 입력한 뒤 "댓글 달기"를 누를 때,
차단할 단어 모음 중에 하나라도 매치 되면 댓글을 달지 못하도록 막을 수 있습니다.
let info = "JavaScript는 프로래밍 언어이다.";
let firstChar = info.indexOf("프로래밍");
console.log(info, firstChar);
if (firstChar !== -1) {
info = info.slice(0, firstChar) + "프로그래밍" + info.slice(firstChar+4, info.length);
}
console.log(info);위는 "프로래밍" 이라는 오타를 "프로그래밍" 이라고 바꾸어 주는 코드입니다.
코드를 한 줄 한 줄 설명하자면
-
info문구에서 "프로래밍"이 시작되는index는 12입니다. -
if (firstChar !== -1)firstChar이 -1이 아니면- 즉, "프로래밍"이라는 문구가 없지 않다면
- 즉, "프로래밍"이라는 문구가 있다면
- "프로래밍" 문구는 12번째에서 시작하므로
firstChar는 12 입니다. 따라서 조건문은true.
"프로래밍"이라는 오타가 포함되어있으면
if문을 실행합니다. -
info.slice(0, firstChar)-
slice메소드는 이름 그대로, 텍스트를 잘라주는 함수입니다. -
그 구조는 다음과 같습니다.
slice(잘릴 시작위치, 잘릴 끝위치) -
잘릴 시작위치는 0입니다. 잘릴 끝위치는
firstChar로 12 입니다. -
그래서
slice메소드는info문구의 0부터 11번째 까지 잘라서 반환합니다. -
잘릴 끝위치가 조금 헷갈리는데, 잘릴 끝위치의 문구는 포함하지 않습니다.
-
따라서, 12번째의 문자는 포함하지 않습니다. 바로 그 직전에서 끊어줍니다.
-
지금
slice메소드가 조금 어렵겠지만 일단slice라는 메소드 있다는 것만 기억하고 넘어가도 좋습니다.console.log(info.slice(0, firstChar));
-
-
info.slice(firstChar+4, info.length);-
잘릴 시작위치는 16 입니다. (
firstChar+ 4 = 12 + 4 = 16) -
잘릴 끝 위치는 22 입니다. (
info.length= 22) -
info의 16번째 문자인 "언" 부터 22번째 문자 이전까지 자르게 됩니다. -
22번째는 문자가 존재하지 않기 때문에, 그 직전에 끊으니 "."까지 포함하는 문자열로 잘리게 됩니다.
console.log(firstChar+4, info.length);
-
위의 예제 모두 직접 작성해서,
한 줄 한 줄 이해하신거 맞으시죠?!!!!!!
Assignment
String의
slice()는 자주 사용 되는 문자열 메소드 중 하나 입니다.
먼저slice에 대한 설명을 가볍게 읽어봅시다 👉 slice설명
그 후 sliceCityFromAddress 함수를 구현해 주세요.
-
sliceCityFromAddress함수는address를 인자로 받습니다. -
address는 주소를 나타내는 string 입니다. -
주어진 주소가 어느 도시 인지를 찾아 해당 주소에서 도시 부분만 삭제한 새로운 주소를 리턴해 주세요.
-
도시는 무조건 "시" 로 끝납니다. 예를 들어, "서울시".
-
"도" 와 "시" 는 주소에 한번 밖에 포함되어 있지 않습니다.
-
예를 들어, 다음과 같은 주소가 주어졌다면;
"경기도 성남시 분당구 중앙공원로 53"다음과 같은 값이 리턴되어야 합니다:
"경기도 분당구 중앙공원로 53"
// 강의와 관련된 코드를 작성해주세요.
console.log('쌍따옴표("")로 텍스트를 감싸줍니다.');
// Assignment - 다음 함수 안에 코드를 구현하세요
function sliceCityFromAddress(address) {
// your code here
// your code here
let space = address.indexOf("도");
let city = address.indexOf("시");
console.log(space, city);
if(space === -1){ //address에 "도"라는 글자가 없다면
return address.slice(city+2); //address에서 4번째 부터 표시
}else{ //그외엔
return address.slice(0,space+2) + address.slice(city+2);//주소의 0번째부터 4번째부터 7번째 까지는 잘라버리기
}
}
sliceCityFromAddress("경기도 서울시 동작구 노량진1동 삼익아파트");
module.exports = {sliceCityFromAddress}
